Нужно чтоб они были динамические, т.е при сдвижении ползунка чтоб менялось значение и цвет ползунка, в общем все на скрине. P.S. хотелось бы сделать на чистом js
-
Мы тут только помогаем программный код подкорректировать... Дак какая помощь вам нужна? – Diskyp 28 авг '18 в 6:27
-
тут уже такое делали мы раз 500 :( – Избыток Сусликов 28 авг '18 в 6:28
-
@Diskyp Извините не знал, ну сделать на скрине, в общем сверстать как правильно и добавить логику – Мартин Иден 28 авг '18 в 6:29
-
@Избытоксусликов скиньте пожалуйста ссылку на подобные вопросы, буду благодарен – Мартин Иден 28 авг '18 в 6:30
-
ru.stackoverflow.com/questions/806132/… – Избыток Сусликов 28 авг '18 в 6:31
1 ответ
На чистом Javascript нужные стили я думаю сами сможете добавит
"use strict";
var volumeSlider = document.getElementById('volume');
var sliders = [volumeSlider];
function Slider(slider) {
this.slider = slider;
slider.addEventListener('input', function() {
this.updateSliderOutput();
this.updateSliderLevel();
}.bind(this), false);
this.level = function() {
var level = this.slider.querySelector('.slider-input');
return level.value;
}
this.levelString = function() {
return parseInt(this.level());
}
this.remaining = function() {
return 99.5 - this.level();
}
this.remainingString = function() {
return parseInt(this.remaining());
}
this.updateSliderOutput = function() {
var output = this.slider.querySelector('.slider-output');
var remaining = this.slider.querySelector('.slider-remaining');
var thumb = this.slider.querySelector('.slider-thumb');
output.value = this.levelString();
output.style.left = this.levelString() + '%';
thumb.style.left = this.levelString() + '%';
if (remaining) {
remaining.style.width = this.remainingString() + '%';
}
}
this.updateSlider = function(num) {
var input = this.slider.querySelector('.slider-input');
input.value = num;
}
this.updateSliderLevel =function() {
var level = this.slider.querySelector('.slider-level');
level.style.width = this.levelString() + '%';
}
}
sliders.forEach(function(slider) {
new Slider(slider);
});
body {
font-family: sans-serif;
font-weight: 600;
font-size: 20px;
padding: 1rem;
}
.slider {
position: relative;
width: 50vw;
height: 3rem;
margin: 3rem auto;
display: flex;
flex-direction: column;
}
.slider-output {
display: block;
position: absolute;
bottom: 0;
left: 50%;
box-sizing: border-box;
transform: translateX(-50%);
}
.slider-input {
-webkit-appearance: none;
background-color: transparent;
position: absolute;
width: 105%;
margin-left: -2.5%;
height: 2rem;
outline: none;
}
.slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 2rem;
height: 8rem;
}
.slider-thumb,
.top-thumb,
.tail-thumb {
height: 2rem;
width: 2rem;
border-radius: 1rem;
position: absolute;
top: -0.75rem;
background-color: #be1450;
}
.slider-thumb {
left: 50%;
margin-left: -1rem;
}
.top-thumb {
left: 0;
margin-left: -1rem;
}
.tail-thumb {
right: 0;
margin-right: -1rem;
}
.slider-track {
height: 0.5rem;
background-color: #ddd;
border-radius: 0.25rem;
}
.slider-level {
height: 0.5rem;
background-color: #be1450;
width: 50%;
border-radius: 1rem;
}
<div id='volume' class='slider'>
<output class='slider-output'>50</output>
<div class='slider-track'>
<div class='slider-thumb'></div>
<div class='slider-level'></div>
</div>
<input class='slider-input' type='range' value='50' min='0' max='100' />
</div>