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!

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: https://github.com/driftyco/ionic/issues/512.

1 Like

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 http://prajwalkman.github.io/angular-slider/ 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.

1 Like

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

Markup:

<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>
      </ion-item>

CSS (Stylus):

.item.has-nouislider
  display:flex
  padding-left: 11px
  padding-right: 11px

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

  [ya-no-ui-slider]
    flex: 1
    height:24px
    margin-left:10px
    margin-right:10px
    border-radius:0
    border:0
    box-shadow:none
    background-color: transparent

    .noUi-base
      margin-left: 17px
      margin-right: 13px
      width: auto

    .noUi-origin:first-child
      &:before
        content: ''
        background: $colorPrimary
        position:absolute
        width:100%
        height:2px
        top:50%
        transform: translateY(-50%)

    .noUi-origin:last-child
      &:before
        content: ''
        background: lightness(black, 80%)
        position:absolute
        width:100%
        height:2px
        top:50%
        transform: translateY(-50%)

    .noUi-handle
      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
        display:none

    &:before
      content: ''
      background: lightness(black, 80%)
      position:absolute
      width:100%
      height:2px
      top:50%
      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.

2 Likes

Here is a simple ionic solution: http://codepen.io/shaoner/pen/ZWoYgE

1 Like

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-list>
	<ion-item class="has-nouislider">
		18&nbsp;&nbsp;<div ya-no-ui-slider="desc.ageSliderOptions"
						  ya-no-ui-slider-events="desc.ageSliderEvents"></div>&nbsp;&nbsp;65+
	</ion-item>
</ion-list>