Question 256356 in Html Question posted in
Some basic documentation can be found here.

Html – I want to change the color of the tick marks on input[range]

What I want to know.

I would like to create and customize a slider in HTML.
While various sites explain how to customize the slider itself, I could not find any explanation of how to customize the scale itself.
If I add data using input="range", datalist, or option, how do I change the color of the ticks added by datalist?

      <input
        type="range"
        min=0
        max=100
        step={1}
        list="tickmarks"
      />
      <datalist id="tickmarks">
        {Array.from({ length: max - min + 1 }, (_, i) => i + min).map((label) => (
          <option key={label} value={label}/>
        ))}
      </dataList>
Tags:

2

Answers


  1. 0

    Try this:

    use accent-color that will help to change the color of input type range

    input[type='range'] {
accent-color: #f2354e;
}
    <input type="range">
    Login or Signup to reply.
  2. 0

    To create ticks programatically:

    var datalist = document.getElementById("tickmarks");
for (i = 0; i <= 100; i+=10)
    {
         var option = document.createElement("option");
         option.setAttribute("value", i);
         datalist.appendChild(option);
    }
 
    <input type="range" inputmode="numeric"
       min="0"
       max="100"
       step="1"
       list="tickmarks" />
<datalist id="tickmarks">
</datalist>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search