CODEWITHSUNDEEP
htmlinputrangeintervals
James B
James B

Reputation: 159

HTML input range showing intervals

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">

Upvotes: 3

Views: 10406

Answers (3)

Uladzimir Pasvistselik
Uladzimir Pasvistselik

Reputation: 3921

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>

Upvotes: 2

Roy
Roy

Reputation: 8069

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" />

Upvotes: 6

Roy
Roy

Reputation: 1967

Add step attribute to the input field.

<input type="range" min="0" max="100" step="10">

Upvotes: 0

Related Questions