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.
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.
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.
Here is a simple ionic solution: http://codepen.io/shaoner/pen/ZWoYgE
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 
Example of my html:
<ion-list>
<ion-item class="has-nouislider">
18 <div ya-no-ui-slider="desc.ageSliderOptions"
ya-no-ui-slider-events="desc.ageSliderEvents"></div> 65+
</ion-item>
</ion-list>