Multiple Range Input Request


#1

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?
#2

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.


#3

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…


#4

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.


#5

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?


#6

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.


#7

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


#8

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?


#9

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


#10

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.


#11

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


#12

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?


#13

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


#14

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>