How to Create a Custom Range Slider Using CSS

Pure CSS creates cool custom range sliders: no JavaScript required, both accessibility

This article will demonstrate how to create custom scope sliders using only CSS and native HTML <input type="range"> elements without relying on JavaScript while ensuring accessibility. Tutorials cover ways to customize input elements, including resetting and disabling browser default styles, setting slider styles, and creating sliding gradient effects using border-image. In addition, it will be explained how to add subtle animations to enhance user interaction, such as converting the slider from a border-only circle to a full circle when clicked, and darkening the color when hovered. This technology retains native features and supports keyboard navigation, providing a versatile and easy-to-access solution for custom range sliders.

Key points:

• Create a custom scope slider using pure CSS and native HTML <input type="range"> elements.
The
• tutorial contains steps to customize input elements: reset and disable browser default styles, set slider styles, and create sliding gradient effects using border-image.
• Add subtle animations to enhance the user experience, such as changing the slider shape when clicked and changing the color when hovered.
• Keep native functionality and support keyboard navigation to ensure accessibility.

The default range slider style is not beautiful. The following figure shows the display effect of the default range slider in Chrome, Firefox and Safari browsers:

However, <input type="range"> elements are difficult to style. Most online solutions rely on JavaScript and verbose code. Worse, some technologies can also destroy the accessibility of elements. So let's see how to better utilize pure CSS to achieve without affecting accessibility. The following CodePen demonstration shows what we are going to build: CodePen link

Structure of range input element

Let's analyze the structure of the range input element first. It is a native element and each browser has its own implementation. There are two main implementations: one for Webkit and Blink browsers (such as Chrome, Edge, Safari and Opera):

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Another one for Firefox:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

IE also has a third implementation, but luckily, this browser is almost gone now! This inconsistency between browsers makes tasks difficult because we need to provide different styles for each implementation. I won't go into this in depth as this post will never be finished, but I highly recommend reading this post by Ana Tudor for a more in-depth exploration (post links should be inserted here). You just need to remember that no matter the implementation, the "slider" (thumb) is always a common component.

I will only style this element, which will make my custom scope slider easy to customize. Let's jump straight into the code and see what's amazing.

Custom input element

The first step is to use appearance: none and some other common properties to reset and disable all browser default styles:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

In more complex cases, if other default styles are applied to our elements, we may need to add more code. Just make sure we have a "naked" element without any visual style. Let's also define some CSS variables so that we can easily create different variants for the range slider:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

In this step, only the slider and its default style are visible.

Set the slider element style

Let's style the slider element. We will start with the basic settings:

<code class="language-css">input {
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

Use border-imageAdd some magical effects

Now we will use a magic CSS trick to complete our slider. It involves the use of border-image:

<code class="language-css">input {
  --c: orange; /* 活动颜色 */
  --g: 8px; /* 间隙 */
  --l: 5px; /* 线粗细 */
  --s: 30px; /* 滑块大小 */

  width: 400px; /* 输入宽度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

The hallucination is perfect by adding overflow: hidden to the input element and using larger values.

Add some animations

Can we add some subtle animations when interacting with the slider? It doesn't require a lot of code and will enhance the UX of the slider. First, we convert the slider from a border-only circle to a full circle when clicked. To do this, we add the box-shadow value of spread.

Conclusion

We've done it and don't have to deal with any complex browser-related implementations! We identified the selector for the slider element and used some CSS tricks to style the entire range of sliders. Don't forget, we only use the <input type="range"> element, so we don't have to worry about any accessibility issues as we keep the native features. The slider supports keyboard navigation without any problem. Here are more examples of sliders created with the same technique: CodePen link

CodePen link

The above is the detailed content of How to Create a Custom Range Slider Using CSS. For more information, please follow other related articles on the PHP Chinese website!