0
1
2
3
4
5
//Tick width & range thumb width need to be in sync, that's why I'm using the $unit variable. $unit: 10px; //Some basic setup first * {box-sizing: border-box;} body { font-family: sans-serif; font-size: $unit * 2; line-height: $unit * 2; color: black; background: white; } //Some range styling. //Using mixins because each major browser needs a separate selector to style parts of the range input, combining selectors would invalidate the whole selector on each browser @mixin range-track { -webkit-appearance: none; width: 100%; height: $unit * 4; color: transparent; background: lightgray; border-radius: 999px; border: none; } @mixin range-thumb { -webkit-appearance: none; height: $unit * 4; width: $unit * 4; border-radius: 30px; background: black; box-shadow: 0px 2px 10px -2px black(1); } input[type=range] { -webkit-appearance: none; display: block; margin: 0; width: 100%; background: transparent; } input[type=range]::-webkit-slider-runnable-track { @include range-track(); } input[type=range]::-moz-range-track { @include range-track(); } input[type=range]::-ms-track { @include range-track(); } input[type=range]::-ms-fill-lower { display: none; } input[type=range]::-ms-fill-upper { display: none; } input[type=range]::-webkit-slider-thumb { @include range-thumb(); } input[type=range]::-moz-range-thumb { @include range-thumb(); } input[type=range]::-ms-thumb { @include range-thumb(); } //And now the ticks .ticks { display: flex; justify-content: space-between; //We need left & right padding that's half the width of the range thumb, so all ticks align with the center of the thumb padding: $unit $unit*2; } .tick { position: relative; display: flex; justify-content: center; width: 1px; background: gray; //Cap the height of the tick & push text down, so the tick renders as a little line and the text doesn't overlap the line. Also add margin, so the container expands enough that the next element you'll add won't overlap the ticks. height: $unit; line-height: $unit * 5; margin-bottom: $unit*2; }