我有一个类型范围的输入，也就是 slider 输入。我想给它加css

Question

我希望 slider 有两个 colors，一种颜色用于下降，另一种颜色用于上升。 请看下图。 但是，现在 slider 颜色是全宽。

我还想让 slider 圆圈本身变成不同的颜色，也就是拇指。

到目前为止这是我的代码

     <div class="slider-info">
        <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
      </div>

input.slider {
      width: 100%;
    }


    /* Change the color of the thumb on webkit-based browsers */
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      cursor: move;
      transform: scale(2);
      position: relative;
      bottom: 2.5px;
    }

    /* Change the color of the track on webkit-based browsers */
    input[type=range]::-webkit-slider-runnable-track {
      position: relative;
      background-color: #A4FFAF;
      border-radius: 3px;
      padding: 0px;
      height: 10px;

    }

我想实现这种外观，但没有库。 可以用普通的 css 和 HTML 来实现吗？ 到目前为止，这是我的笔https://codepen.io/Victor-Villacis/pen/gOjKQrN

Answer 1

您可以使用这样的代码使其看起来与图片相似，只需使用属性即可。

这是一个有趣的笔，您可以用作参考： https://codepen.io/brandonmcconnell/pen/oJBVQW

 .slidecontainer { width: 100%; } html input[type="range"] { outline: 0; border: 0; width: 400px; max-width: 100%; margin: 24px 0 16px; transition: box-shadow 0.2s ease-in-out; padding: 0px 15px 0px 15px; } @media screen and (-webkit-min-device-pixel-ratio: 0) { html input[type="range"] { overflow: hidden; height: 40px; -webkit-appearance: none; background-color: #24232c; } html input[type="range"]::-webkit-slider-runnable-track { height: 45px; -webkit-appearance: none; color: #a4ffaf; transition: box-shadow 0.2s ease-in-out; } html input[type="range"]::-webkit-slider-thumb { width: 40px; -webkit-appearance: none; height: 50px; cursor: ew-resize; background: #fff; box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff; border-radius: 50%; transition: box-shadow 0.2s ease-in-out; position: relative; } html input[type="range"]:active::-webkit-slider-thumb { background: #fff; box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 3px #1597ff; } } html input[type="range"]::-moz-range-progress { background-color: #a4ffaf; } html input[type="range"]::-moz-range-track { background-color: #9a905d; } html input[type="range"]::-ms-fill-lower { background-color: #43e5f7; } html input[type="range"]::-ms-fill-upper { background-color: #9a905d; }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> </head> <body> <p>Custom range slider:</p> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> </div> </body> </html>

我有一个类型范围的输入，也就是 slider 输入。我想给它加css

问题描述

1 个解决方案

解决方案1
0 2023-01-28 05:40:09

我有一个类型范围的输入，也就是 slider 输入。 我想给它加css

问题描述

1 个解决方案

解决方案1 0 2023-01-28 05:40:09

我有一个类型范围的输入，也就是 slider 输入。我想给它加css

解决方案1
0 2023-01-28 05:40:09