The right way to Create a Customized Vary Slider Utilizing CSS — SitePoint

On this article, I’ll present learn how to use trendy CSS methods to create an attention-grabbing, customized vary slider with nothing however the native HTML <enter> ingredient.

Vary sliders (<enter sort="vary">) let customers select a worth inside a given vary, offering an alternate enter sorts similar to <enter sort="quantity">.

The default vary slider types don’t look nice. The picture beneath offers an concept of how vary the sliders we’ll be styling are displayed by default in Chrome, Firefox and Safari.

However <enter> components are arduous to type. Many of the on-line options for styling them depend on JavaScript and a few cluttered code. Worse nonetheless, a few of these methods additionally break the accessibility of the ingredient.

So let’s have a look at learn how to do issues higher, utilizing simply CSS, and with out compromising accessibility. The CodePen demo beneath reveals what we’ll be constructing.

See the Pen
CSS solely customized vary sliders by Temani Afif (@t_afif)
on CodePen.

Cool proper? You’ll additionally discover variations on these types on the finish of the article!

The Construction of the Vary Enter Factor

Let’s begin by dissecting the construction of the vary enter ingredient. It’s a local ingredient, and every browser has its personal implementation of such components. We primarily have two completely different implementations.

There’s one for Webkit and Blink browsers similar to Chrome, Edge, Safari, and Opera:

<enter sort="vary" min="0" max="100" step="1" worth="20">
  <div>
    <div pseudo="-webkit-slider-runnable-track" id="observe">
      <div id="thumb">
    </div>
   </div>
  </div>
</enter>

And that is the one for Firefox:

<enter sort="vary" min="0" max="100" step="1" worth="20">
  <div></div>
  <div></div>
  <div></div>
</enter>

There’s a 3rd implementation for IE, however fortunately that browser is all however lifeless and gone now!

Such inconsistency between browsers is what makes the duty troublesome, as we have to present completely different styling for every implementation. I gained’t dig extra into this, because the article would by no means finish, however I extremely suggest studying this text by Ana Tudor for extra in-depth exploration.

The one factor you want to remember is that, regardless of the implementation, we at all times have the “thumb” as a standard part.

I’m solely going to type this ingredient, which is able to make my customized vary slider simple to customise. Let’s leap straight into the code to see the magic in play.

Customizing the Enter

Step one is to reset and disable all of the browser default types through the use of look: none and another frequent properties:

enter {
  look :none;
  background: none;
  cursor: pointer;
}

In a extra sophisticated state of affairs, we may have so as to add extra code in case different default types are utilized to our ingredient. Merely simply want to ensure we’ve a “bare” ingredient with none visible styling.

Let’s additionally outline just a few CSS variables so we are able to simply create completely different variations for the vary slider:

enter {
  --c: orange; 
  --g: 8px; 
  --l: 5px; 
  --s: 30px; 

  width: 400px; 
  top: var(--s); 
  look :none;
  background: none;
  cursor: pointer;
}

At this step, solely the thumb is seen with its default types, because the CodePen demo beneath reveals.

See the Pen
Default enter types — by Temani Afif by SitePoint (@SitePoint)
on CodePen.

Styling the Thumb Factor

Let’s type the thumb ingredient. We’ll begin with the fundamental setup:

<thumb selector> {
  top: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--l) inset var(--c);
  look: none;
}

The code ought to be self-explanatory. Nothing fancy to date, and we’ll get the consequence proven beneath.

See the Pen
Styling the thumb — by Temani Afif by SitePoint (@SitePoint)
on CodePen.

Be aware using two completely different selectors, as we defined within the first part:

enter[type="range" i]::-webkit-slider-thumb { }

enter[type="range"]::-moz-range-thumb { }

However how are you aware the selector to make use of?

I’ve merely inspected the code of the enter utilizing the browser’s developer instruments to see the selector every browser is utilizing to type the thumb. The article I shared beforehand reveals you learn how to manipulate the developer instruments to get such info.

Including Some Magic with border-image

Now we’re going to make use of a magic CSS trick to finish our slider. It includes using border-image:

border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 1/0 100vw/0 calc(100vw + var(--g));

I do know it appears scary, however let’s dissect that line and you will note it’s not that troublesome. The above is the shorthand for the next:

border-image-source: linear-gradient(90deg,var(--c) 50%,#ababab 0); 
border-image-slice: 1;
border-image-width: 0 100vw;
border-image-outset: 0 calc(100vw + var(--g));

From the MDN web page, we learn:

The border-image CSS property attracts a picture round a given ingredient. It replaces the ingredient’s common border.

Our picture can be a gradient having two colours — the primary one (outlined by --c), and a grey colour. We want the border picture to cowl the entire house of the enter horizontally, so we use a giant worth for the left and proper width (100vw) whereas we preserve the highest and backside at (0).

However the border-image-width is restricted to the ingredient measurement. To beat this, we have to additionally use a giant worth for the border-image-outset to extend the house out there for the border picture. From MDN once more:

The border-image-outset CSS property units the space by which a component’s border picture is about out from its border field.

The elements of the border picture which are rendered outdoors the ingredient’s border field with border-image-outset don’t set off overflow scrollbars and don’t seize mouse occasions.

If you first see the slider, it appears like we’re rising the primary colour on the left, however in actuality we’re sliding a hard and fast gradient that’s overflowing our ingredient.

The next demo offers an summary of what’s taking place below the hood.

See the Pen
Overview of the border-image trick by SitePoint (@SitePoint)
on CodePen.

Drag the thumb and slide it to see how issues are shifting. I’m utilizing a small worth for the width and outset so we are able to simply perceive the trick.

Additionally, notice that the outset must be larger than the width to have the hole. Because of this, it’s outlined to be equal to the width plus the worth of the hole.

By including overflow: hidden to the enter ingredient and utilizing a giant worth, the phantasm is ideal, as proven beneath.

See the Pen
Vary Slider — overflow: hidden by SitePoint (@SitePoint)
on CodePen.

What concerning the border-image-slice? Why the worth of 1?

This property is a bit tough, however necessary when utilizing border-image. In our case, this worth isn’t very related and a small constructive worth will do the job. I’ve an in depth Stack Overflow reply if you wish to study extra about it.

The final step is to lower the scale of the bar to match the scale we outlined by the variable --l. For this, we’re going to make use of clip-path:

clip-path:
    polygon(
       0     calc(50% + var(--l)/2),
      -100vw calc(50% + var(--l)/2),
      -100vw calc(50% - var(--l)/2),
       0     calc(50% - var(--l)/2),
       0 0,100% 0,
       100%  calc(50% - var(--l)/2),
       100vw calc(50% - var(--l)/2),
       100vw calc(50% + var(--l)/2),
       100%  calc(50% + var(--l)/2),
       100% 100%,0 100%);

The picture beneath offers an summary of the completely different factors to know the form of the polygon.

That’s it! We have now a customized vary slider with just a few strains of code that you may simply management by adjusting just a few variables.

See the Pen
Last Vary Slider — by Temani Afif by SitePoint (@SitePoint)
on CodePen.

Including Some Animation

What about some delicate animation after we work together with the slider? It doesn’t want lots of code, and it’ll improve the UX of the slider.

First, we’re going to rework the thumb from a border-only circle right into a full circle after we click on on it. For this, we enhance the unfold worth of the box-shadow. Do not forget that we’ve used box-shadow to outline the border of the thumb:

box-shadow: 0 0 0 var(--l) inset var(--c);

We replace the var(--l) to var(--s) utilizing the :energetic selector and the :focus-visible. The latter is expounded to keyboard navigation and permits us to have the identical impact whether or not we use the mouse or the keyboard.

The code is as follows:

enter[type="range" i]::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--l) inset var(--c);
  transition: .3s;
}

enter[type="range" i]::-moz-range-thumb {
  box-shadow: 0 0 0 var(--l) inset var(--c);
  transition: .3s;
}

enter:energetic::-webkit-slider-thumb,
enter:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--s) inset var(--c);
}

enter:energetic::-moz-range-thumb,
enter:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var(--s) inset var(--c);
}

It’s a bit prolonged for a box-shadow transition, proper? We will optimize it utilizing a CSS variable:

enter[type="range" i]::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--c);
  transition: .3s;
}

enter[type="range" i]::-moz-range-thumb {
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--c);
  transition: .3s;
}

enter:energetic,
enter:focus-visible {
  --_b:  var(--s);
}

I’m expressing the unfold worth utilizing a variable, and I’m merely updating that variable on :energetic and :focus-visible.

I’m additionally going so as to add somewhat animation to the colour. I’ll make it a bit darker on :hover. For this, I gained’t replace the colour, however relatively combine it with black utilizing the brand new color-mix() operate. This trick permits us to make use of the primary colour outlined by --c relatively than outline a brand new darkish colour for every slider manually:

--_c: color-mix(in srgb, var(--c), #000 var(--p,0%));

I’m defining a brand new variable that can substitute the --c within the code. Then by adjusting the share of the black colour (#000) utilizing the variable --p, I’m controlling the “darkness” of the colour:

enter:focus-visible,
enter:hover{
  --p: 25%;
}

This characteristic isn’t but supported in each browser, so using a fallback is extremely really useful:

@helps not (colour: color-mix(in srgb,pink,pink)) {
  enter {
    --_c: var(--c); 
  }
}

Our vary slider is now excellent!

See the Pen
CSS solely customized vary sliders by Temani Afif (@t_afif)
on CodePen.

Conclusion

We’ve reached the tip and haven’t needed to take care of any complicated browser-related implementation! We recognized the selector of the thumb ingredient and, utilizing just a few CSS methods, we styled the entire vary slider with it. Let’s not overlook that we did this utilizing solely the <enter> ingredient, so we don’t have to fret about any accessibility points, as we’ve stored the native performance. The slider helps keyboard navigation with no downside.

Listed here are extra examples of sliders utilizing the identical method. I’ll allow you to dissect their code as an train.

See the Pen
Customized vary sliders by Temani Afif (@t_afif)
on CodePen.

See the Pen
Customized vary sliders by Temani Afif (@t_afif)
on CodePen.