Ticks for type=“range” HTML input

Question

After reading this I was wondering if it is possible to show ticks in Chrome and Firefox for a type=\"range\" number input? The closest thing I could find on t

Answer 1

Introduction

Inspired by user10452457's answer I created an approach that corrects the spacing of datalist elements especially when the length of datalist entries varies. The downside is that you have to specify the length of the datalist in its style attribute: . If the length is not known when creating the datalist you can change this value by using some javascript.

This approach works by splitting the width of the range input in such a way that the text of the datalist entry is centered below the range thumb. The first/last datalist entry is aligned to the left/right. This method requires the width of the range input to be 100% and the margin-left to be 0.

Default range and thumb

The following css styles a datalist that directly follows a range input when using the default thumb of Firefox that has a width of 12px.

/* style range */
input[type=range] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* style datalist */
input[type=range] + datalist {
    display: block;
    margin-top: -4px;
}
input[type=range] + datalist option {
    display: inline-block;
    width: calc((100% - 12px) / (var(--list-length) - 1));
    text-align: center;
}
input[type=range] + datalist option:first-child {
    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
    text-align: left;
}
input[type=range] + datalist option:last-child {
    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
    text-align: right;
}

Custom range and thumb

When you want to use a custom style for your range input you can use the following style. The --thumb-width variable holds the with of the thumb and is used for the correct calculation.

// change thumb-width variable on input change
var tw = document.getElementById('thumb-width');
var mr = document.getElementById('my-range');
var ml = document.getElementById('my-datalist');
tw.onchange = () => {
    mr.style.setProperty('--thumb-width', tw.value + 'px');
  ml.style.setProperty('--thumb-width', tw.value + 'px');
}

/* set thumb width */
input[type=range], input[type=range] + datalist { --thumb-width: 8px; }

/* style range */
input[type=range] {
  -webkit-appearance: none; /* hide track and thumb */
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

/* style datalist */
input[type=range] + datalist {
  display: block;
  margin-top: -4px;
}
input[type=range] + datalist option {
  display: inline-block;
  width: calc((100% - var(--thumb-width)) / (var(--list-length) - 1));
  text-align: center;
}
input[type=range] + datalist option:first-child {
  width: calc((100% - var(--thumb-width)) / ((var(--list-length) - 1) * 2) + var(--thumb-width) / 2);
  text-align: left;
}
input[type=range] + datalist option:last-child {
  width: calc((100% - var(--thumb-width)) / ((var(--list-length) - 1) * 2) + var(--thumb-width) / 2);
  text-align: right;
}

/* style Firefox range and thumb */
input[type=range]::-moz-range-track {
    background: #eee;
    cursor: pointer;
  
    height: 2px;
    border: 1px solid #888;
    border-radius: 1px;
}
input[type=range]::-moz-range-thumb {
    background: #eee;
    
    box-sizing: border-box;
    width: var(--thumb-width);
    height: 20px;
    
    cursor: pointer;
    
    border: 1px solid #888;
    border-radius: 3px;
}

/* style Chrome range and thumb */
input[type=range]::-webkit-slider-runnable-track {
    background: #eee;
    cursor: pointer;
  
    height: 2px;
    border: 1px solid #888;
    border-radius: 1px;
}
input[type=range]::-webkit-slider-thumb {
    background: #eee;
    
    box-sizing: border-box;
    width: var(--thumb-width);
    height: 20px;
    
    cursor: pointer;
    
    border: 1px solid #888;
}

Thumb width: