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, Nov 30 '13 at 07:40

Subbu · Accepted Answer · 2013-11-30T07:46:37.050

7

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 Nov 30 '13 at 07:46

answered Nov 30 '13 at 07:30

Subbu

2,063
4
29
42

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. – anjo Nov 30 '13 at 07:34
1

@Subbu How can we show values together with ticks?. Just like measurement scale – Jyothi Babu Araja Feb 15 '16 at 16:07
how can add vertical scale with label of every step – Satish Kumar sonker Dec 10 '17 at 05:04
Doesn't work in Firefox by now, Chrome supports it though. – Muhammad Musavi Oct 10 '19 at 08:27

Muhammad Musavi · Answer 2 · 2020-08-30T07:31:15.437

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>

How to add scale in slider control in html5 input tag

2 Answers2