html5 range sliders,How To Style HTML5 Range Slider Across Multiple Browsers

柔光的暖阳◎ 2022-10-09 02:33 125阅读 0赞

The range is one of the new input type introduced in HTML5. This input type allows one to input number within the specified range. The browsers will render this input type natively as a slider control. It’s a very intuitive user interface that we commonly find in an App. We can slide the handle bar to the right or left to produce the number within the range.

But as you can see above, each browser displays this input type in a slightly different taste that may not sit well with some designers. So in this article, we will show you how to style it in a more unified design form. If you are ready, let’s just get started.

In Chrome, Safari, and Opera

Safari and Opera are Webkit-based browsers. Though Chrome has decided to adopt its own engine, Blink, it looks like for the time being, Chrome still inherited several code bases from websites.

Webkit provides an easy way to style any input type, including range. To get started, we can select the input with the attribute selector and remove the native Webkit/Chrome styles by setting the -webkit-appearance to none.

input\[type=range\] \{

\-webkit-appearance: none

From this stage, we can add anything such as border, background color, rounder border and so on.

.input\[type=range\] \{

\-webkit-appearance: none;

width: 100%;

border-radius: 8px;

height: 7px;

border: 1px solid \#bdc3c7;

background-color: \#fff;

As you can see below, the handle bar is the only remaining part from the input that is not affected from the above code.

![gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==][gif_base64_R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw]

To apply styles to it, we have to use Webkit proprietary pseudo-element selector ::-webkit-slider-thumband similarly remove the native styles with -webkit-appearance, like so.

input\[type='range'\]::-webkit-slider-thumb \{

\-webkit-appearance: none;

background-color: \#ecf0f1;

border: 1px solid \#bdc3c7;

width: 20px;

height: 20px;

border-radius: 10px;

cursor: pointer;

And that’s how we style input type range in a Webkit browser. The style we added above should take effect on Chrome, Safari as well as the latest version of Opera. However, it would not affect Firefox and Internet Explorer as they run different engines. But we have workarounds for those two.

In Firefox

Adding styles directly with attribute selector input\[type='range'\] would not change the native styles of the input in Firefox. Instead, we have to use Firefox proprietary pseudo-element selector ::-moz-range-track and ::-moz-range-thumb.

The ::-moz-range-track will affect the input range track, while the ::-moz-range-thumb will affect the input handle bar.

.firefox input\[type=range\]::-moz-range-track \{

border-radius: 8px;

height: 7px;

border: 1px solid \#bdc3c7;

background-color: \#fff;

.firefox input\[type=range\]::-moz-range-thumb \{

background: \#ecf0f1;

border: 1px solid \#bdc3c7;

width: 20px;

height: 20px;

border-radius: 10px;

cursor: pointer;

We apply the exact same styles. Open Firefox, and you should get a close result as in the Webkit browsers.

![gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==][gif_base64_R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw]

In Internet Explorer

Internet Explorer displays the input type range a lot different than the rest. To make it easier, here I have drawn a diagram showing the pieces that form the input.

![gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==][gif_base64_R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw]

IE will also show a tooltip showing the number you are one, as we slide through the handle bar.

![gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==][gif_base64_R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw]

Each of these input parts can be styled with IE proprietary pseudo-element ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks, and ::-ms-tooltip. Here we will also apply the same styles as in Webkit and Firefox.

input\[type="range"\]::-ms-fill-lower,

input\[type="range"\]::-ms-fill-upper \{

background: transparent;

input\[type="range"\]::-ms-track \{

border-radius: 8px;

height: 7px;

border: 1px solid \#bdc3c7;

background-color: \#fff;

input\[type="range"\]::-ms-thumb \{

background-color: \#ecf0f1;

border: 1px solid \#bdc3c7;

width: 20px;

height: 20px;

border-radius: 10px;

cursor: pointer;

But the output is not something that we’ve expected. The tick marks is visible, while the top and bottom of the handle bar are hidden.

We can easily remove the tick marks by adding step="any" to the input element. However, making the handle bar fully visible is something that is not possible. It is as if the input element has the overflow set to hidden, but it cannot be undone just by setting overflow to visible. This is something that I’m still trying to figure out. If you have solved this issue, you can share it in the comment box below.

![gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==][gif_base64_R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw]

Final Thought

The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. I hope there will be a standard that can regulate this matter in the future. Lastly, here is the link to see the input range we have shown you in this article.

[gif_base64_R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw]: