我有一个输入类型的范围又名滑块输入,我想添加css到它

o4tp2gmn 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(93)

我想滑块有两种颜色，一种颜色当它下降，另一种颜色当它上升。请看下面的图片。但是，现在滑块的颜色是全宽。
我还想使滑块圆圈本身的颜色也就是不同的拇指。
到目前为止这是我的代码

<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

css

来源：https://stackoverflow.com/questions/75265397/i-have-an-input-of-type-range-aka-the-slider-input-i-want-to-add-css-to-it

1条答案

按热度按时间

9udxz4iz1#

您可以使用这样的代码使它看起来与图片类似，只需玩弄属性即可。
这里有一支有趣的钢笔，你可以作为参考：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>

赞(0）回复(0）举报 2023-02-01

我来回答

我有一个输入类型的范围又名滑块输入,我想添加css到它

1条答案

相关问题

热门标签

最新问答