Styling input type range HTML5 element

Styling input type range HTML5 element

3 min. read

Input type range

<input type="range"> HTML5 element allows user to select a value between a maximum and a minimum value both inclusive, user can select any value within the range by moving the scroll button.

It is a slider control, by default it's minimum value is 0, maximum value is 100 and granularity is 1, this means that by default integers from 0 to 100 can be selected.

To change the default minimum, maximum and granularity min, max and step attributes are used respectively.

eg.

<input type="range" min="10" max="50" step="2">

It is a part of HTML5 standard and is not supported in <= IE9 browsers.

If a browser does not support input type range element then it will treat input type range as input type text (text box).

Default appearance of input type range in chrome.

Input type range

Applying css to input type range to make it better looking

input[type="range"]
{
    width: 100%;
    margin: 0px;
    padding: 8px 0px;
    outline: none;
    background-color: transparent;
    -webkit-appearance: none;
}

input[type="range"]:focus
{
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track
{
    width: 100%;
    height: 4px;
    background: #CCC;
    border-radius: 7px;
    cursor: pointer;
}

input[type="range"]:focus::-webkit-slider-runnable-track
{
    background:#00AD7A;
}

input[type="range"]::-webkit-slider-thumb
{
    height: 18px;
    width: 18px;
    margin-top: -7px;
    border:1px solid #00AD7A;
    background: #00AD7A;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type="range"]::-moz-range-thumb
{
    height: 18px;
    width: 18px;
    border:1px solid #00AD7A;
    background: #00AD7A;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-track
{
    width: 100%;
    height: 4px;
    background: #CCC;
    border-radius: 7px;
    cursor: pointer;
}

input[type="range"]:focus::-moz-range-track
{
    background:#00AD7A;
}

input[type="range"]::-ms-thumb
{
    height: 18px;
    width: 18px;
    border:1px solid #00AD7A;
    background: #00AD7A;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-ms-track
{
    width: 100%;
    height: 4px;
    color: transparent;
    border-width: 16px 0;
    border-color: transparent;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-ms-fill-lower
{
    background: #CCC;
    border-radius: 3px;
}

input[type="range"]::-ms-fill-upper
{
    background: #CCC;
    border-radius: 3px;
}

input[type="range"]:focus::-ms-fill-lower
{
    background: #00AD7A;
}

input[type="range"]:focus::-ms-fill-upper
{
    background: #00AD7A;
}

See result in the fiddle below

Write comments