How to use CSS to beautify the sliding input bar? A brief analysis of custom style methods

How to use CSS to beautify the sliding input bar (input range)? The following article will introduce to you how to customize the style of the sliding input bar using pure CSS. I hope it will be helpful to you!

Regarding the native input range, how to customize the style of the sliding input bar has always been a hurdle in my mind. Under normal circumstances, it can be easily beautified to this extent. (Recommended learning: css video tutorial)

Why is it so easy? Because these have corresponding pseudo-elements that can be modified

::-webkit-slider-container {
  /*可以修改容器的若干样式*/
}
::-webkit-slider-runnable-track {
  /*可以修改轨道的若干样式*/
}
::-webkit-slider-thumb {
  /*可以修改滑块的若干样式*/
}

However, there is no style that has been slid over. If you want to define the following style, simple CSS may not be able to achieve it

Note: Firefox has a separate pseudo-class that can be modified. This article discusses the Chrome implementation plan

1. My implementation ideas

Since there is no special pseudo-element that can modify the color of the slid part, and only the slider is movable, can we start with the slider?

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

When this rectangle is long enough, it can completely cover the left track. Within the visible range, can it indicate that the part on the left has been slid over? The diagram is as follows (the semi-transparent on the left indicates outside the slider)

I have tried the idea of ​​​​pseudo elements, like this

::-webkit-slider-thumb::after{
  /*本想绘制一个足够长的矩形*/
}

Unfortunately, it cannot be used in pseudo elements Generate pseudo-elements again.

So, how to draw a rectangle outside the element?

2. Draw graphics outside elements through border-image

What are some ways to draw graphics outside elements? After thinking about it, there are box-shadow and outline, but they don’t seem to be suitable for this situation. What we need to draw is a rectangle with controllable size, and these two methods are Can't control the shape very well. Is there any other way?

It really does! I just saw an article by teacher Zhang Xinxu two days ago: The undervalued border-image attribute, one of the characteristics is Constructing an image outside the element, and it does not occupy any space . Try it quickly. Draw a rectangle with a width of 99vw (enough to cover the slider). 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,#f44336) 0 fill / 8 20 8 0 / 0 0 0 99vw; /*绘制元素外矩形*/
}

The effect is as follows

Note a few points:

• border-image To take effect, border must be specified. The setting here is border: 1px solid transparent;

• The rectangle is drawn with a linear gradientlinear-gradient(#f44336,#f44336)

• border 8 20 8 0 in -image means border-image-width, the distance from the top, right, bottom, and left. Since the size of the slider itself is 20 * 20, this can Make sure the height is 4 (20 - 8- 8) and the position is the leftmost of the slider itself (20 from the right)

• border-image middle0 0 0 99vw represents the border-image-outset expansion size, which refers to the distance to the left expansion 99vw

Next pass overflow:hiddenJust hide the outer part

::-webkit-slider-container {
    /*其他样式*/
    overflow: hidden;
}

The complete code can be accessed: 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,#f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
}

3. There are still some limitations

The above implementation cost is actually very low. Compared with the conventional implementation, only one line is added for drawing rectangles outside the elements.

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

However, since the excess part is cut off beyond hiding, the edge of the slider is "one size fits all". Therefore, if the slider is required to have rounded corners, this implementation method will not work.

If you have any other good ideas, please leave a message for discussion

4. A brief summary

Regarding the border-image-outset attribute, I have actually seen it before on MDN, but I only have a brief understanding of it. I still thought it was useless. Now it seems that these attributes are not useless, but they have not encountered suitable application scenarios. Here’s a brief summary:

• The slider has 3 pseudo-elements that can be customized with containers, tracks, and sliders

• No more pseudo-elements can be included Nested pseudo elements

• There are three methods of drawing box-shadow, outline, and border-image outside the element

• border-image Yes Use images in any format, including CSS gradients

• This solution cannot achieve rounded corners

Of course these ideas are just "recipes", like Firefox It fully supports custom styles. Unfortunately, the desktop is still dominated by Chrome. We can only slowly look forward to the subsequent updates of Chrome. Finally, if you think it is good and helpful to you, please like, collect and forward it❤❤❤

(Learning video sharing: webfrontend)

The above is the detailed content of How to use CSS to beautify the sliding input bar? A brief analysis of custom style methods. For more information, please follow other related articles on the PHP Chinese website!