时间戳

首页 > 解决方案 > 在反应中用滑块填充输入类型范围

javascript - 在反应中用滑块填充输入类型范围

问题描述

我正在尝试构建和输入类型range，当拇指向右侧增长时，轨道会填充新颜色。

在过去，我曾经使用普通的 JS 和 CSS 来做到这一点。 

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  input[type="range"]:focus {
    outline: none;
  }

  input[type="range"]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-radius: transparent;
    color: transparent;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--strongCyan);
    border-radius: 30px;
    box-shadow: -10px 5px 50px var(--strongCyan);
    cursor: pointer;
    height: 36px;
    width: 36px;
    margin-top: -14px;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: var(--lightGrayishBlueEmptySideBar);
    border-radius: 70px;
  }
}

但现在有了反应，结果是： codeandbox

一开始我以为这可能是盒子阴影，但当我改变它时，什么也没有发生。

标签： javascriptcssreactjs

解决方案

推荐阅读