Customize Range Input with Semantic UI style

Because the Semantic UI doesn't provide the style for <input type="range" />. So, I have to customize it by self.

There are two part for the range input. They are track and thumb. The are CSS source codes below.

Track

input[type="range"] {
    -webkit-appearance: none;
    border-width: 1px;
    border-style: solid;
    border-radius: 50rem;
    border-color: rgba(0, 0, 0, 0.1);
    padding: 3px 5px;
}

The first line -webkit-appearance: none; is used to clear the default style in webkit browser. It will clear the track, and then there would be an empty track.

And the 4 lines following is used to define the border. I want to design the style like the toggle checkbox in Semantic UI, so it need a grey and arc border.

The last line padding: 3px 5px; is used to hold some space between the thumb and the border.

Thumb

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #89B84C;
    border-radius: 50rem;
    height: 0.7em;
    width: 0.7em;
}

Like track, we need to clear the default style of webkit browser first. And then the second line define the color of thumb. The third line make the shape of the thumb be a circle. Finally, the last 2 lines is used to define the size of the thumb.

To see more about that, please go to my blog.