Ionic provides the range widget but in the javascript API there is no content related to the range widget. Please provide it. We would love if Ionic would provide lot of programmable options on the range slider widget.
If this is already available please let me know. As I have searched enough and not been able to find any valid result.
Right now I am using
<input type="range" name="volume" min="0" max="100" value={{someVar}} >
And in my controller
$scope.someVar = someOtherVarValue;
There really isn’t much ionic-logic in the range slider. But this is a barebones on how to implement the range slider and have it based off some scope data.
Thank you for that. I was just doing that. And by the way the range slider’s colors does not work on mobile device. The range slider widget works well enough but the different colors that ionic provides does not work. Please look into that.
Hmm odd. Can you provide a screen shot to show this?
Of course I will get it now. Wait a few mins.
Please have a look at it.
What device is this?
Lenovo 860i. Running on Android 4.2.2. (unwanted stuff : 1.3Ghz quad core processor. 1GB RAM)
That is not the screen shot by the way. I have captured a part of the screen using another camera 
Ha i kinda figured, give a second to try it on a device my self
did you get the same?
yeah I got the same thing. I got in touch with the devs and they are aware of this. Basically its a case of graceful degradation. The colors may not be visible but it should still function.
Oh! But I need those colors. Cant show users an important state of the app without those colors. Please try and include that functionality.
Hmm you can try adding these css gradients, which covers more prefixes and such.
input[type="range"] {
background: -moz-linear-gradient(top, #cccccc 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cccccc 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cccccc 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cccccc 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #cccccc 0%,#cccccc 100%); /* W3C */
}Yeah sure! Will try those. Sorry for the late reply. There was a long power cut.
I tried it. Does not work correctly. Adding vendor prefixes does not do anything to the colored part of the range slider. Any other solutions ? I did inspect the CSS properties for the range slider but could not figure much out for the color part which appears on sliding.
I am experiencing issues for just this:
.range .range-calm input type= range -webkit-slider-thumb:before{
backround : themeColor;
}
Will this be fixed or should i stop using it? I know Android does not support this but still can Ionic implement it with custom AngularJS and not just depend on the default HTML5 range input?
Right now the main focus is getting the apis we have more powerful and more stable. That being said, we’re probably not going to do anything right at this moment. Bigger fish to fry 
Ok. I understand. People who have the gold make the rules.
<input type="range" id="budget" name="budget" ???="100" min="0" max="3000" ng-model="budget">
In this case, how do I get the slide range in 100??
Just like Jquery this.
I am a newbie in ionic
Many Thanks
Try this :
<input type="range" id="budget" name="budget" value="100" min="0" max="3000" ng-model="budget">