Implement native sliders by using range-inputs

Excerpt

Why implement sliders for input when CSS (+ <input>) can too. Part 4.

Slide back in instead of using custom implementations of sliders.

There are many range slider implementations out on the internet. Most of them have been implemented using a huge amount of html, CSS and JavaScript.

But there is a lean alternate solution, a native implementation, not supporting every option but still useful to allow entering a value by simple touch gestures.

<input type="range">

By using some CSS you can apply another style after disabling the default appearance and controlling shape and colors of the input element and the `-webkit-slider-thumb`:

Here another example to define the hue value of a color - better than entering a numeric value but it behaves the same.

CSS code example

input[type='range'] {
  font-size: 160%;
  appearance: none;
  -webkit-appearance: none;
  height: 1.2em;
  width: 30ch;
  border: .1em solid #203050;
  border-radius: 0.6em;
  cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: .5em;
  background: #203050;
}

input[type='range'].hue {
  border-radius: 0;
  border-width: 1px;

  background: linear-gradient(to right, red 0%, yellow 17%, lime 33%, aqua 50%, blue 67%, fuchsia 83%, red 100%);
}

More options

The input type="range" min max step

To play around with the CSS applied to inputs you can try the CSS generators linked below.

Comments

Native browser functionality gets (slowly) better over time and there is the moment to switch from custom coding to the standard element functionality that you should not miss. Especially when size counts.

See also

Tags

CSS