Как закрасить линию перед ползунком через css?
У меня есть 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%); } |
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...
Дополнительно:
На css такое ни сделать
https://nikitahl.com/style-range-input-css
Песочница - 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> ); } |
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 */ } |
.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 */ }
- В итоге надо что бы после ползунка линия серая была?
Ответы:
input[type=range]::-webkit-slider-thumb::before, /* для остальных браузеров */ input[type=range]::-moz-range-progress /* для Firefox */ { /**/ } |
input[type=range]::-webkit-slider-thumb::before, /* для остальных браузеров */ input[type=range]::-moz-range-progress /* для Firefox */ { /**/ }
Такое же внимание уделите псевдоэлементам -webkit-slider-runnable-track и -webkit-slider-thumb, потому что FF тут умудрился выбиться из толпы.
- Не помогло, и у меня не Firefox
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы закрасить линию перед ползунком через CSS, можно использовать псевдоэлемент ::before или ::after в сочетании с позиционированием и стилями. Вот пример решения для этой задачи:
```html
```
```css
.slider {
position: relative;
}
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #f1f1f1;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #4CAF50;
cursor: pointer;
}
.range-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #4CAF50;
cursor: pointer;
}
.range-slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 10px;
background: #4CAF50;
}
```
В данном примере мы создаем слайдер с полосой перед ползунком, которая будет закрашена зеленым цветом. Псевдоэлемент ::before позволяет создать дополнительный элемент перед элементом .range-slider, который будет использоваться для закрашивания линии.
Этот код можно доработать и настроить под ваши нужды, изменяя цвет, размер и позиционирование элементов. Надеюсь, это поможет вам решить вашу задачу по закрашиванию линии перед ползунком через CSS.