Ticks for Type="Range" HTML Input

Ticks for type=range HTML input

Input ranges are still a bit of a nightmarish hack when it comes to styling. That said, displaying tickmarks on major browsers is possible, with a bit of elbow grease and browser-specific solutions.

---

Internet Explorer / Edge

As you seem to be aware, Internet Explorer will show ticks by default if you add the HTML step attribute. In a weird twist of events, Internet Explorer and Edge are arguably the most flexible browser when it comes to styling input ranges.

<input type="range" min="0" max="100" step="25">

Show tick positions in custom range input

I know my answer is way way late, but I keep coming back here when I try to find doing the same thing. I did manage to display tickmarks using the following settings.

The code results in the following:

* {  box-sizing: border-box;}
.slider {  -webkit-appearance: none;  appearance: none;  width: 100%;  height: 25px;  background: #D3D3D3;  outline: none;  opacity: 0.7;  -webkit-transition: .2s;  transition: opacity .2s;}
.slider:hover {  opacity: 1;}
.slider::-webkit-slider-thumb {  -webkit-appearance: none;  appearance: none;  width: 25px;  height: 25px;  background: #FF0000;  cursor: pointer;}
.slider::-moz-range-thumb {  width: 25px;  height: 25px;  background: #FF0000;  cursor: pointer;}
.sliderticks {  display: flex;  justify-content: space-between;  padding: 0 10px;}
.sliderticks p {  position: relative;  display: flex;  justify-content: center;  text-align: center;  width: 1px;  background: #D3D3D3;  height: 10px;  line-height: 40px;  margin: 0 0 20px 0;}

<div class="range">  <input type="range" min="0" max="5" value="2" class="slider">  <div class="sliderticks">    <p>0</p>    <p>1</p>    <p>2</p>    <p>3</p>    <p>4</p>    <p>5</p>  </div></div>

HTML5 input type range show range value

This uses javascript, not jquery directly. It might help get you started.

function updateTextInput(val) {          document.getElementById('textInput').value=val;         }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);"><input type="text" id="textInput" value="">

How to style HTML5 range input to have different color before and after slider?

Pure CSS solution:

• Chrome: Hide the overflow from input[range], and fill all the space left to
  thumb with shadow color.
• IE: no need to reinvent the wheel: ::-ms-fill-lower
• Firefox no need to reinvent the wheel: ::-moz-range-progress

/*Chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) {    input[type='range'] {      overflow: hidden;      width: 80px;      -webkit-appearance: none;      background-color: #9a905d;    }        input[type='range']::-webkit-slider-runnable-track {      height: 10px;      -webkit-appearance: none;      color: #13bba4;      margin-top: -1px;    }        input[type='range']::-webkit-slider-thumb {      width: 10px;      -webkit-appearance: none;      height: 10px;      cursor: ew-resize;      background: #434343;      box-shadow: -80px 0 0 80px #43e5f7;    }
}/** FF*/input[type="range"]::-moz-range-progress {  background-color: #43e5f7; }input[type="range"]::-moz-range-track {    background-color: #9a905d;}/* IE*/input[type="range"]::-ms-fill-lower {  background-color: #43e5f7; }input[type="range"]::-ms-fill-upper {    background-color: #9a905d;}

<input type="range"/>

Range input thumb doesn't align with axis ticks

You are not taking into account the width of the thumb in relation to the edge of the track.

One way to solve this is to wrap your two svg elements in a div, then provide padding on both sides equal to half of the thumb width.

Modify HTML:

<fieldset class="range__field">
    <input class="range" type="range" min="0" max="10" />
    <div class="timeline-wrapper">
        <!-- svgs go here -->
    </div>
</fieldset>

Append to CSS:

.timeline-wrapper {
    padding: 0 10px;
}

---

.timeline-wrapper {  padding: 0 10px;}input.range {  -webkit-appearance: none;  bottom: -10px;  position: relative;  width: 100%;  margin: 0;  padding: 0;  border: 0;  background: transparent;}input.range:focus {  outline: 0;}input.range::-moz-focus-outer {  border: 0;}input.range::-webkit-slider-thumb {  box-shadow: 1px 1px 1px black, 0px 0px 1px black;  border: 0;  height: 20px;  width: 20px;  border-radius: 50%;  background: white;  cursor: pointer;  -webkit-appearance: none;  margin-top: -7.5px;}input.range::-moz-range-thumb {  box-shadow: 1px 1px 1px black, 0px 0px 1px black;  border: 0;  height: 20px;  width: 20px;  border-radius: 50%;  background: white;  cursor: pointer;}input.range::-webkit-slider-runnable-track {  width: 100%;  height: 5px;  cursor: pointer;  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);  background: indigo;  border-radius: 20px;  border: 0;}input.range::-moz-range-track {  width: 100%;  height: 5px;  cursor: pointer;  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);  background: indigo;  border-radius: 20px;  border: 0;}input.range::-ms-track {  width: 100%;  height: 5px;  cursor: pointer;  background: transparent;  border-color: transparent;  color: transparent;}input.range::-ms-thumb {  box-shadow: 1px 1px 1px black, 0px 0px 1px black;  border: 0;  height: 20px;  width: 20px;  border-radius: 50%;  background: white;  cursor: pointer;  height: 5px;}input.range::-ms-fill-lower,input.range::-ms-fill-upper {  background: indigo;  border: 0;  border-radius: 40px;  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);}.range__tick {  fill: silver;}.range__tick:first-child {  -webkit-transform: translateX(2px);  -moz-transform: translateX(2px);  -ms-transform: translateX(2px);  -o-transform: translateX(2px);  transform: translateX(2px);}.range__tick:last-child {  -webkit-transform: translateX(-3px);  -moz-transform: translateX(-3px);  -ms-transform: translateX(-3px);  -o-transform: translateX(-3px);  transform: translateX(-3px);}.range__field {  border: 0;}

<fieldset class="range__field">  <input class="range" type="range" min="0" max="10">  <div class="timeline-wrapper">    <svg role="presentation" width="100%" height="10" xmlns="http://www.w3.org/2000/svg">      <rect class="range__tick" x="0%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="10%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="20%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="30%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="40%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="50%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="60%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="70%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="80%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="90%" y="3" width="1" height="10"></rect>      <rect class="range__tick" x="100%" y="3" width="1" height="10"></rect>    </svg>    <svg role="presentation" width="100%" height="14" xmlns="http://www.w3.org/2000/svg">      <text class="range__point" x="0%" y="14" text-anchor="start">0</text>      <text class="range__point" x="10%" y="14" text-anchor="middle">1</text>      <text class="range__point" x="20%" y="14" text-anchor="middle">2</text>      <text class="range__point" x="30%" y="14" text-anchor="middle">3</text>      <text class="range__point" x="40%" y="14" text-anchor="middle">4</text>      <text class="range__point" x="50%" y="14" text-anchor="middle">5</text>      <text class="range__point" x="60%" y="14" text-anchor="middle">6</text>      <text class="range__point" x="70%" y="14" text-anchor="middle">7</text>      <text class="range__point" x="80%" y="14" text-anchor="middle">8</text>      <text class="range__point" x="90%" y="14" text-anchor="middle">9</text>      <text class="range__point" x="100%" y="14" text-anchor="end">10</text>    </svg>  </div></fieldset>

---

Related Topics