How to add scale in slider control in html5 input tag

Question

Is there any way we could include a scale in slider. I haven't found any attribute to do that.

Consider using a background image with equally spaced ticks & manipulating the step attribute of input type=range control. — Vikram Deshmukh
– Vikram Deshmukh, Commented Nov 30, 2013 at 7:40

codeandcloud · Accepted Answer · 2025-08-15 17:45:34Z

9

To make tick marks on the slider , you will have to use the attribute called list and it should be linked to <datalist> tag of HTML5.

<input type=range min=0 max=100 value=50 step=20 list=tickmarks>
<datalist id=tickmarks>
    <option>0</option>
    <option>20</option>
    <option>40</option>
    <option>60</option>
    <option>80</option>
    <option>100</option>
</datalist>

edited Aug 15 at 17:45

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

answered Nov 30, 2013 at 7:30

Subbu

2,1194 gold badges29 silver badges45 bronze badges

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

5 Comments

anjo Over a year ago

I have tried this. Is there any way we could add a scale. Like, a mark for every 10 units. Is there any attribute to do this.

Jyothi Babu Araja Over a year ago

@Subbu How can we show values together with ticks?. Just like measurement scale

Satish Kumar sonker Over a year ago

how can add vertical scale with label of every step

Muhammad Musavi Over a year ago

Doesn't work in Firefox by now, Chrome supports it though.

Kevin O. Over a year ago

93.66 % of all browser supports it (source. caniuse.com/?search=datalist)

Muhammad Musavi · Accepted Answer · 2020-08-30 07:31:15Z

First of all I should appreciate @Subbu answer which is helpful but I suppose there are some details which are needed to be dealt with.

You can utilize datalist but it doesn't work in Firefox, Chrome supports it though, there is a workaround, see sample below which covers most of browsers:

input[type="range"]::-moz-range-track {
  padding: 0 10px;
  background: repeating-linear-gradient(to right, 
    #ccc, 
    #ccc 10%, 
    #000 10%, 
    #000 11%, 
    #ccc 11%, 
    #ccc 20%);
}

<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
    <option>0</option>
    <option>25</option>
    <option>50</option>
    <option>75</option>
    <option>100</option>
</datalist>

Take a look at this link for more details.

If you consider to colorize the ticks, you simply set style for input like below sample (Chrome only):

<input type="range" style="color:red" min="0" max="10" value="5" step="1" list="tickmarks"/>
<datalist id="tickmarks"><option>0</option><option>5</option><option>10</option></datalist>

But you won't be able to style it based on what MDN says:

Some elements simply can't be styled using CSS. These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including , , and elements. The file picker widget is also known not to be stylable at all. The new and elements also fall in this category.

You might need a vertical range input, in that case the tricky way for Firefox needs to change, simply change the value for gradient, here is a simple example which specifies center point of the range input in Firefox while its orientation is vertical:

input[orient=vertical][type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to bottom, 
    #ccc, 
    #ccc 50%, 
    #000 50%, 
    #000 51%, 
    #ccc 51%, 
    #ccc 60%);
}
input[type=range][orient=vertical] {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 30px;
    height: 150px;
    }

<input type="range" orient="vertical" style="color:red; background:
#00f0;" min="0" max="10" value="3" step="1" list="tickmarks"/>
<datalist id="tickmarks"><option>5</option></datalist>

Collectives™ on Stack Overflow

How to add scale in slider control in html5 input tag

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related