Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use CSS to beautify the sliding input bar", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use CSS to beautify the sliding input bar" this article.

How to customize the style of the native input range sliding input bar has always been a hurdle in my mind, and in general, it can be easily beautified to this extent.

Why is it so easy? Because there are corresponding pseudo elements that can be modified.

::-webkit-slider-container {/ * can modify several styles of the container * /}::-webkit-slider-runnable-track {/ * can modify several styles of the track * /}::-webkit-slider-thumb {/ * can modify several styles of the slider * /}

However, there is no part of the style that has been slipped over. If you want to define such a style as follows, simple CSS may not be able to implement it.

Note: Firefox has separate pseudo-classes that can be modified. This article discusses the Chrome implementation scheme.

I. my idea of realization

Since there is no special pseudo element to change the color of the slided part, and only the slider is movable, can we start with the slider?

Suppose there is a rectangle to the left of the slider, which follows the slider.

When the rectangle is long enough, it can completely cover the left track. In the visual range, does it mean that the left side has slid over the part? The hint is as follows (left translucent means outside the slider)

Tried the idea of pseudo-elements, like this.

::-webkit-slider-thumb::after {/ * I wanted to draw a rectangle long enough * /}

Unfortunately, pseudo elements cannot be generated again in pseudo elements.

So, how do you draw a rectangle outside the element?

Second, draw graphics outside the elements through border-image

What are the ways to draw graphics outside of elements? Think about it, there are box-shadow and outline, but it doesn't seem to be suitable for this situation. What we need to draw is a rectangle with controllable size, and neither of these ways can control the shape very well. Is there any other way?

There is! I just saw an article by teacher Zhang Xinxu two days ago: the undervalued border-image attribute, one of which is to build an image outside the element and does not take up any space. Give it a try. Draw a rectangle with a width of 99vw (enough to cover the slider bar). The code is as follows

::-webkit-slider-thumb {- webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: # f44336; border: 1px solid transparent; margin-top:-8px; border-image: linear-gradient (# f44336) 0 fill / 8 20 8 0 / 0.0099 vw; / * draw the outer rectangle of the element * /}

The effect is as follows

Note a few points:

For border-image to take effect, you must specify border. Border: 1px solid transparent is set here.

The rectangle is linear-gradient drawn by a linear gradient (# f44336)

In border-image, 8 20 8 0 represents border-image-width, the distance from top, right, bottom and left. Since the size of the slider itself is 20 * 20, the height can be determined to be 4 (20-8-8), and the position is the leftmost position of the slider itself (20 from the right).

0 99vw in border-image indicates the size of the border-image-outset extension, which refers to the distance of extending the 99vw to the left

Then you can hide the outside part through overflow:hidden.

::-webkit-slider-container {/ * other styles * / overflow: hidden;}

The complete code can be accessed at: input range

Https://codepen.io/xboxyan/pen/YzERZyE

The complete code is attached below (codepen seems to be unstable recently)

[type= "range"] {- webkit-appearance: none; appearance: none; margin: 0; outline: 0; background-color: transparent; width: 500px;} [type= "range"]:-webkit-slider-runnable-track {height: 4px; background: # eee;} [type= "range" I]::-webkit-slider-container {height: 20px; overflow: hidden } [type= "range]::-webkit-slider-thumb {- webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: # f44336; border: 1px solid transparent; margin-top:-8px; border-image: linear-gradient (# f44336) 0 fill / 8 20 8 0 / 0px 0px 02000px; third, there are still some limitations

The cost of the above implementation is actually very low, compared with the regular implementation, only one line is added to draw the rectangle outside the element.

Border-image: linear-gradient (# f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px

However, because the extra part is cut out of the hidden way, the edge of the slider is "one size fits all", so if the slider is required to have a fillet, this method will not work.

The above is all the contents of the article "how to beautify the sliding input bar with CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.