Using steps in range slider possible?


#1

Let’s say, I need a range slider from 2 to 20 but I want just to pick values in steps of 2.

Has anyone an idea how to achieve this?

<div class="item range">
  <i class="icon ion-ios7-bolt-outline"></i>
  <input type="range" name="volume" min="2" max="20" steps="2">
  <i class="icon ion-ios7-bolt"></i>
</div>

Cheers,
Sascha


#2

Nevermind. Got it:

it is step=“2”


#3

Any ideas on how to get something like a notch to show up so people know what they have moved the range to? http://codepen.io/pulkitsinghal/pen/gqjAE/


#4

use ng-model for the range input (ng-model=“rangeValue”) and show the value with {{rangeValue}}