2

Is it possible to add the intervals on to a HTML input range. Essentially so that the user can easily just click the bar at the given intervals. I know there are some customs sliders that use JS and CSS but I just want the standard bar with some vertical lines on really.

EDIT Sorry I should have been more clear: What I'm looking for is entirely visual, I'll post my code below but I have implemented the step attribute what I want is a visual representation on the bar showing the user that there are 5 possible steps/intervals on the bar and that is what is available to them. 

    <input id="slider" max="5" min="1" step="1" style="width:90%; height:30%; type="range" value="5">
James B
  • 149
  • 2
  • 14

3 Answers3

5

You mean like this (see code below)? You need to add the step="X" variable to your range slider.

What's step?

Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.

Read more about it at Mozilla Developer Network.

<input id="slider1" type="range" min="1" max="11" step="2" />
Roy
  • 7,811
  • 4
  • 24
  • 47
  • The problem with that particular answer is that according to the comments this does not work on Mac OS and as I'm currently on a Mac this is problematic ha – James B Apr 04 '16 at 10:13
0

Add step attribute to the input field.

<input type="range" min="0" max="100" step="10">
Roy
  • 1,939
  • 1
  • 14
  • 21
0

There is a nice example, originally posted on MDN:

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>
Vladimir Posvistelik
  • 3,843
  • 24
  • 28