Multiple Range Input Request


Hi there,

I was wondering if there was a way to use the range input with two sliding buttons. For instance my min would be 1 and my max 100 and I wanted to chose the range 30-50. This would be excellent if I could somehow extend the range input or if this was built in. Thanks!

Which Multiple Range slider currently works well with latest ionic bundle?

The short answer is: nope.

At this time, the Ionic range input is just a styled HTML range input, which doesn’t support multiple sliders.

However, I’ve opened a feature request on Github for this:


Hi !

It would really be nice to have this component in Ionic. We need this to create a price range with min and max values…


I had the same need and same request but I came across and it works quite nicely. The slider can be styled, it allows two values, and it does not require jQuery. Works well in my project.


I am having troubles getting it work, you are using it?, now is DEPRECATED.
I have problems in the style, anyone have a working example?


Hey all, I’ve got a nice implementation that looks like it should be included in the kit. The api is a bit different, but the visuals are close to perfect.

Default Ionic Slider and dual slider for comparison:

Slider framework: nouislider + nouislider-angular


<ion-item class="has-nouislider">
        <i class="icon ion-android-favorite-outline"></i>
        <div ya-no-ui-slider="vm.options"></div>
        <i class="icon ion-android-favorite"></i>

CSS (Stylus):

  padding-left: 11px
  padding-right: 11px

    display: block
    min-width: 24px
    text-align: center
    font-size: 24px

    flex: 1
    background-color: transparent

      margin-left: 17px
      margin-right: 13px
      width: auto

        content: ''
        background: $colorPrimary
        transform: translateY(-50%)

        content: ''
        background: lightness(black, 80%)
        transform: translateY(-50%)

      top: -3px
      height: 29px
      width: 29px
      border-radius: 100%
      border: 0
      background: white
      box-shadow: 0 0 2px 0 alpha(black .3), 0 2px 5px 0 alpha(black .2)

      &:after, &:before

      content: ''
      background: lightness(black, 80%)
      transform: translateY(-50%)

  &.light [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorLight
  &.stable [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorStable
  &.positive [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorPositive
  &.calm [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorCalm
  &.balanced [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorBalanced
  &.energized [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorEnergized
  &.assertive [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorAssertive
  &.royal [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorRoyal
  &.dark [ya-no-ui-slider] .noUi-origin:first-child:before
    background-color: $colorDark

You’ll probably need to change the styling a bit if you don’t want to use icons. But this should get you most of the way there.


Here is a simple ionic solution:


I used your codepen link. Now my question is how do I get value of ‘from’ and ‘to’ changed by user? Which callback should I use?


@nales, I’ve updated it using an object as reference (usually I use vm instead of $scope anyway)


Yes. That’s fine. But how can I call API when these values change? For example for sample range I use ng-change=‘update()’ function and then in controller define update function. Here only value changes in UI how do I get change event in main controller?

I tried using $scope,$watch for ‘from’ and ‘to’ variables.

Btw thanks you for this code pen.


@nales, Take a look at ng-change-min and ng-change-max attributes, you can pass one or two different callbacks


Tried this.

ui-multi-range(ng-step=‘1’, ng-min=18, ng-max=50, ng-model-min=‘agefrom’, ng-model-max=‘ageto’ ng-change-max=‘update()’ ng-change-min=‘update()’)

Not working. Do I need to change in directive?


Looks great, is it possible for you to paste your css again. The above seems to be missing some formatting. Thanks.


This worked really well for me :slight_smile:

Example of my html:

	<ion-item class="has-nouislider">
		18&nbsp;&nbsp;<div ya-no-ui-slider="desc.ageSliderOptions"