Slider / Range Example


Hi, Is anyone able to point me towards a basic example of getting a slider / range input? I’m looking for something where the user can slide the range input left to right, and see the value update next to the control.

I’ve tried ripping the example on the kitchen sink app, but my complete n00b status with angular means I’ve wound up with good looking controls that just have the literal {{modelName}} next to them (not quite what I was going for :))


So I’ve fallen back to using just plain old HTML5/JS for this:


Which obviously works just fine.

I guess I’m just hung-up on the kitchensink example. I suppose this approach wasn’t used as they wanted to feed the inputs into the angular animations?


Since I had the same question and no one was kind enough to answer you, I’ll post my answer for anyone else interested. Apologies for the bump, hopefully it’s helpful to n00bs like me.

I used the following code…

In my view:

<div class="row">
    <div class="col col-30">Search Radius:</div>
    <div class="col"><div id="cur_dist"></div></div>
<div class="range">
    <i class="icon super-location"></i>
    <input type="range" id="distance">
    <i class="icon super-map"></i>

In my controller:

	// Set the radius based on the value of the slider
	$("#cur_dist").html($("#distance").val() + " miles");

Note that the slider is a 0-100 value, which was appropriate for my needs. If you want to have a distance that goes from 0-250 miles, for example, you’ll need to do some math to set your value based on the 0-100 position of the slider.