Как закрасить линию перед ползунком через css?

Question

[Даниил Секретов]

У меня есть type="range" ползунок на скриншоте показан он:


Как сделать, чтобы перед желтым ползунком линия закрашивалась в желтый, как в этом примере:


Пытался решить задачу через:

input[type=range]::-webkit-slider-thumb::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #FBB03B; /* Здесь укажите желаемый цвет */
    transform: translateY(-50%);
}

но не помогло, оставлю весь css код - https://codesandbox.io/s/icy-cache-4jwm4x?file=/sr...

Comments

[Максим]

На css такое ни сделать

[Даниил Секретов]

Максим, Можно сделать. Я же показал пример

[drtvader]

Даниил Секретов, выложи в песочницу свой код

[Максим]

Даниил Секретов, можно, в webkit только если не ошибаюсь, если же везде работает то извени ..

[Даниил Секретов]

drtvader, Выложил https://codesandbox.io/s/icy-cache-4jwm4x?file=/sr...

[Александр]

https://css-tricks.com/sliding-nightmare-understan...
https://nikitahl.com/style-range-input-css

[Даниил Секретов]

Александр, Не помогло(

[Александр]

Даниил Секретов, там без JS'а работать не будет.

[Ankhena]

Даниил Секретов, градиентом через кастомные свойства css. (На js)

Answer 1

[Даниил Секретов]

Песочница - 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 */
}

Comments

[drtvader]

В итоге надо что бы после ползунка линия серая была?

Answer 2

[alexalexes]

input[type=range]::-webkit-slider-thumb::before,  /* для остальных браузеров */
input[type=range]::-moz-range-progress /* для Firefox */
{
 /**/
}

Такое же внимание уделите псевдоэлементам -webkit-slider-runnable-track и -webkit-slider-thumb, потому что FF тут умудрился выбиться из толпы.

Comments

[Даниил Секретов]

Не помогло, и у меня не Firefox