Блог

Главная - Вопросы по программированию - заполнить диапазон типов ввода с помощью ползунка в react

заполнить диапазон типов ввода с помощью ползунка в react

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

Я пытаюсь создать и ввести тип 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;
  }
}

но теперь с react это результат:
codesandbox

Вначале я подумал, что, возможно, это тень окна, но когда я изменил ее, ничего не произошло.

Комментарии:

1. Вы можете попробовать: codepen.io/raeesh/pen/VwKQQKd или codepen.io/raeesh/pen/jpGaYd