HTML input range showing intervals

Question

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

Roy · Accepted Answer · 2016-04-04 09:57:20Z

6

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

edited Apr 4, 2016 at 9:57

answered Apr 4, 2016 at 9:49

Roy

8,1295 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James B Over a year ago

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

Uladzimir Pasvistselik · Accepted Answer · 2023-01-18 12:30:56Z

2

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>

answered Jan 18, 2023 at 12:30

Uladzimir Pasvistselik

3,92126 silver badges30 bronze badges

Comments

Roy · Accepted Answer · 2016-04-04 09:52:02Z

0

Add step attribute to the input field.

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

answered Apr 4, 2016 at 9:52

Roy

1,9771 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

HTML input range showing intervals

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related