As one of many maintainers of a UI element library, I’ve applied and styled myriads of enter parts. Someday I used to be assigned the duty of including a vary enter to the library and, I figured it will be the same course of to the opposite inputs I had applied previously. That assumption was appropriate till I started testing the vary enter throughout a number of browsers and rapidly realized that I had much more work on my arms.
After numerous analysis, I used to be lastly in a position to pinpoint sufficient weblog posts, articles, and in-depth tutorials to assist me model the vary enter to render persistently. As an alternative of getting to go looking for a number of sources, the aim behind this weblog submit is to offer a one-stop store for studying how you can correctly model a variety enter that can look constant throughout all browsers. It’s the article I want I had once I had to do that myself and, I hope that it helps make this course of sooner and smoother for you.
Anatomy Of A Vary Enter
The vary enter consists of two important elements:
Monitor
That is the a part of the slider that the thumb runs alongside. Or put one other means, it’s the lengthy aspect that represents the ranges of values that may be chosen.
Thumb
This is a component on the observe that the consumer can transfer round to pick various vary values.
If it have been a mathematical equation:
vary enter = observe + thumb
The vary enter is usually known as a “slider” and all through the remainder of this text, I can be utilizing these phrases interchangeably.
Browser Inconsistencies
To reveal why we even want a tutorial on styling vary inputs within the first place, we’ll check out some screenshots of the default HTML vary enter and the way it will get rendered throughout the 4 main browsers (Chrome, Firefox, Safari, and Edge). Or, in case you choose, you’ll be able to view this CodeSandbox demo in every of the respective browsers to see the browser inconsistencies in all their glory.
Observe: These screenshots have been taken as of September 2021 and could also be topic to alter because the respective browsers replace.
Let’s begin issues off by taking a look at Chrome which, for my part, renders probably the most user-friendly model of the enter by default.
Firefox is subsequent up and appears totally different from the Chrome rendered enter. In Firefox, the peak of the observe is barely shorter. Alternatively, the peak and width of the thumb are bigger and should not have the identical blue background colour that the Chrome model has.
The Safari slider is closest in seems to the Firefox model however, it’s, but once more, nonetheless totally different. This time across the observe appears to have a shadowy impact and, the peak of the thumb and width is smaller than Chrome and Firefox’s renditions. In case you look intently, you can even see that the thumb will not be centered instantly on the observe giving it an unpolished appear and feel.
Final however not least is Edge which, now that Microsoft Edge is constructed off Chromium, is far more aligned with the opposite three browsers than its pre-Chromium predecessor. Nevertheless, we are able to see that it’s nonetheless rendering in another way than the opposite three browsers. Edge’s rendition of its vary enter seems similar to the Chrome model, besides it has a darker gray background colour for the thumb and left-hand aspect of the observe earlier than the thumb.
Now that we’ve seen how awfully inconsistent every browser renders the vary enter, we’ll check out how we are able to use CSS to uniform them.
Vary Reset (Baseline Kinds)
As a result of the browser inconsistencies range so significantly, we have to begin from a stage taking part in subject. As soon as the default types that every browser applies have been stripped away, we are able to begin working in the direction of making a extra uniformed trying enter. We’ll use the enter[type=”range”] element-attribute selector and the types utilized right here will act like a CSS reset for the enter.
To use the baseline types we want 4 properties:
-webkit-appearance: none;
This property is a vendor prefix that applies to all the foremost browsers. By giving it the worth of none this tells every respective browser to filter out any default types. This enables us to have the ability to begin from scratch and construct up the look of the enter from that time.
background: clear;
This clears out the default background that’s utilized to the enter.
cursor: pointer;
width
Units the general width of the enter.
enter[type=”range”] {
-webkit-appearance: none;
look: none;
background: clear;
cursor: pointer;
width: 15rem;
}
Styling The Monitor
When styling the observe (and the thumb) we might want to goal the totally different browsers particular vendor prefixes to be able to apply the correct types within the related aspect. Going ahead, any pseudo-element prefixed with -webkit can be utilized to the Chrome, Safari, Opera and Edge (post-Chromium) browsers. Something prefixed with -moz pertains to Firefox.
Beneath are the pseudo-elements we are going to use to focus on the observe:
::-webkit-slider-runnable-track
Targets the observe in Chrome, Safari, and Edge Chromium.
::-moz-range-track
Targets the observe in Firefox.
/***** Monitor Kinds *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
enter[type=”range”]::-webkit-slider-runnable-track {
background: #053a5f;
top: 0.5rem;
}
/******** Firefox ********/
enter[type=”range”]::-moz-range-track {
background: #053a5f;
top: 0.5rem;
}
The one required properties for the observe are the peak and background. Nevertheless, it is not uncommon to see a border-radius utilized to be able to spherical out the sides.
Styling The Thumb
Styling the thumb (the center knob that the consumer strikes) has extra nuances that should be thought of since there are extra inconsistencies between the browsers on that a part of the vary enter.
Beneath are the pseudo-elements we are going to use to focus on the thumb:
::-webkit-slider-thumb
Targets the thumb in Chrome, Safari, and Edge Chromium.
::-moz-range-thumb
Targets the thumb in Firefox.
Since Firefox and the Webkit browsers have totally different styling issues, I’ll tackle every challenge individually and reveal how you can deal with every of the quirky defaults that get utilized to the thumb.
Chrome, Safari, Edge Chromium (Webkit)
The primary model we have to apply to the ::-webkit-slider-thumb pseudo-element is the -webkit-appearance: none; vendor prefix. We used this property inside the “Baseline Kinds” part to override the final default types which can be utilized by the browser and it serves the same objective on the thumb.
As soon as the default types are eliminated, we are able to then apply our personal customized types. Assuming we apply a top, width and background-color to the thumb, right here is an instance of what we might have up to now:
By default, the WebKit browsers render the thumb in order that it’s not centered on the observe.
To be able to correctly heart the thumb on the observe we are able to use the next system and apply it to the margin-top property:
margin-top = (observe top in pixels / 2) – (thumb top in pixels /2)
Taking the types we now have utilized within the earlier sections and changing rems to pixels we might have a observe top of 8px and a thumb top of 32px. This is able to imply that:
margin-top = (8/2) – (32/2) = 4 – 16 = -12px
Based mostly on this, our finalized types for the webkit browsers would appear to be the next code block:
/***** Thumb Kinds *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
enter[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
look: none;
margin-top: -12px; /* Facilities thumb on the observe */
background-color: #5cd5eb;
top: 2rem;
width: 1rem;
}
Firefox
When making use of types to the thumb in Firefox, you will have to leverage the ::-moz-range-thumb pseudo-element. Fortunately, Firefox doesn’t endure from the identical centering challenge because the Webkit browsers. Nevertheless, it’s one gotcha is across the default border-radius and gray border that it applies to the thumb.
To be able to remediate the default gray border we are able to add the border: none; property. To take away the default border-radius that will get utilized, we are able to add the border-radius: 0 property and now the thumb will look constant throughout all of the browsers.
Based mostly on this our finalized types for the webkit browsers would appear to be this:
/***** Thumb Kinds *****/
/***** Firefox *****/
enter[type=”range”]::-moz-range-thumb {
border: none; /*Removes additional border that FF applies*/
border-radius: 0; /*Removes default border-radius that FF applies*/
background-color: #5cd5eb;
top: 2rem;
width: 1rem;
}
Observe: The Webkit browsers don’t mechanically apply this radius to the border so in case you discover that you simply do need to apply some type of border-radius to the thumb, versus canceling it out as we’ve executed above, you will have to use the specified border-radius dimensions to each the -webkit-slider-thumb and ::-moz-range-thumb pseudo-elements.
Focus Kinds
As a result of the vary enter is an interactive aspect, it’s crucial so as to add focus types to adjust to accessibility finest practices and requirements. When focus types are utilized, it supplies a visible indicator to customers and is particularly vital for these utilizing a keyboard to navigate a web page.
In accordance with the WAI-ARIA: Slider documentation, it is strongly recommended that:
Focus is positioned on the slider (the visible object that the mouse consumer would transfer, also called the thumb).
The very first thing we are going to need to do is take away the default focus types in order that we are able to override them with customized types. To be able to goal the thumbs focus types, we are able to leverage the ::-webkit-slider-thumb and ::-moz-range-thumb pseudo-elements that we used within the earlier part and mix them with the :focus psuedo-class. We are able to then use the CSS define and outline-offset properties to model it the best way we would like.
/***** Focus Kinds *****/
/* Removes default focus */
enter[type=”range”]:focus {
define: none;
}
/***** Chrome, Safari, Opera, and Edge Chromium *****/
enter[type=”range”]:focus::-webkit-slider-thumb {
border: 1px strong #053a5f;
define: 3px strong #053a5f;
outline-offset: 0.125rem;
}
/******** Firefox ********/
enter[type=”range”]:focus::-moz-range-thumb {
border: 1px strong #053a5f;
define: 3px strong #053a5f;
outline-offset: 0.125rem;
}
Observe: If a border-radius is utilized to the thumb, Firefox renders an overview within the form of the thumb whereas the opposite browsers show a blocky define. Sadly, there’s not a easy CSS repair for this and it’s the solely inconsistency that can be current. Nevertheless, the principle objective of including these types is for accessibility functions and the principle purpose, offering a visible indicator when the aspect is concentrated, continues to be achieved.
Placing It All Collectively
Now that we’ve lined all of the types wanted to uniform the vary enter, right here’s what the ultimate CSS stylesheet will appear to be:
/********** Vary Enter Kinds **********/
/*Vary Reset*/
enter[type=”range”] {
-webkit-appearance: none;
look: none;
background: clear;
cursor: pointer;
width: 15rem;
}
/* Removes default focus */
enter[type=”range”]:focus {
define: none;
}
/***** Chrome, Safari, Opera and Edge Chromium types *****/
/* slider observe */
enter[type=”range”]::-webkit-slider-runnable-track {
background-color: #053a5f;
border-radius: 0.5rem;
top: 0.5rem;
}
/* slider thumb */
enter[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
look: none;
margin-top: -12px; /* Facilities thumb on the observe */
/*customized types*/
background-color: #5cd5eb;
top: 2rem;
width: 1rem;
}
enter[type=”range”]:focus::-webkit-slider-thumb {
border: 1px strong #053a5f;
define: 3px strong #053a5f;
outline-offset: 0.125rem;
}
/******** Firefox types ********/
/* slider observe */
enter[type=”range”]::-moz-range-track {
background-color: #053a5f;
border-radius: 0.5rem;
top: 0.5rem;
}
/* slider thumb */
enter[type=”range”]::-moz-range-thumb {
border: none; /*Removes additional border that FF applies*/
border-radius: 0; /*Removes default border-radius that FF applies*/
/*customized types*/
background-color: #5cd5eb;
top: 2rem;
width: 1rem;
}
enter[type=”range”]:focus::-moz-range-thumb {
border: 1px strong #053a5f;
define: 3px strong #053a5f;
outline-offset: 0.125rem;
}
Conclusion
Along with the strategies outlined all through the article, you can even make the most of the vary enter CSS generator I created referred to as range-input.css. The crux of this undertaking was to create a instrument that makes this course of less complicated for builders. The CSS generator permits you to rapidly model frequent CSS properties and supplies a demo slider that shows a real-time preview of the types you need to apply.
Hopefully, styling vary inputs can be less complicated sooner or later. Nevertheless, till that day comes, understanding which pseudo-elements and vendor prefixes to focus on will assist you get properly in your approach to styling sliders to fit your wants.
Additional Assets On Smashing Journal
CSS Mills
Simplifying Type Kinds With accent-color
Good CSS Options For Widespread UI Challenges
A Deep Dive Into object-fit And background-size In CSS
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!