Делаю сайты
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (19)

Лучшие ответы пользователя

Все ответы (16)
  • Как закрасить линию перед ползунком через css?

    @DannYLook Автор вопроса
    Программист
    Песочница - https://codesandbox.io/s/competent-ioana-m99lhw?fi...
    import "./styles.css";
    import React, { useState, useEffect, useRef } from 'react';
    
    export default function App() {
      const [value, setValue] = useState(1);
      const rangeRef = useRef(null);
    
      const handleChange = (e) => {
        setValue(parseInt(e.target.value));
      };
    
      useEffect(() => {
        const rangeElement = rangeRef.current;
        const rangeWidth = (value / 20) * rangeElement.offsetWidth;
    
        rangeElement.style.setProperty("--range-width", `${rangeWidth}px`);
      }, [value]);
    
      return (
        <div className="App">
          <input
            type="range"
            min="1"
            max="20"
            value={value}
            onChange={handleChange}
            ref={rangeRef}
          />
        </div>
      );
    }

    .App {
      text-align: center;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      margin-top: -6px;
      margin-left: -2px;
      width: 35px;
      height: 15px;
    
      background: #fbb03b;
      border-radius: 6px;
    
      cursor: ew-resize;
    }
    input[type="range"]::before {
      content: "";
      position: absolute;
      top: -1px;
      left: -2px;
      width: 0;
      height: 3px;
      background-color: red; /* Здесь можно изменить цвет */
      transform: translateY(-50%);
      transition: width 0.3s ease-in-out; /* Добавьте плавный переход */
      z-index: -1; /* Добавить z-index: -1 */
    }
    
    input[type="range"]::before {
      /* ... */
      width: var(--range-width, 0);
    }
    input[type="range"] {
      -webkit-appearance: none;
      position: relative; /* Добавить position: relative */
    }
    Ответ написан
    1 комментарий
  • Как можете оценить качество моего кода HTML и CSS?

    @DannYLook
    Программист
    По моему код красивый! И удобный.
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (42)