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

I hope, this will help somebody formating the tick and datalist under FF. Requires the options to be evenly spaced and input + datalist have to have the same width.

input[type="range"] {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}
datalist {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: -23px;
    padding-top: 0px;
}
option {
    width: 2ex;
    display: flex;
    justify-content: center;
    height: 42px;
    align-items: end;
    background-image: url(tick.png);
    height: 4ex;
    background-position-y: -15px;
    background-position-x: center;
    z-index: -1;
}