Ich möchte einen Bereich Slider mit einem Design in es machen. Ich habe keine Ahnung, wie ich den Input stilisieren soll. http://prntscr.com/ebyoev wie diese Das, was ich tun will, ich weiß nicht, wie die Kreise auf dem Anfang und das Ende des Bereichsschiebereglers zu implementieren und wie dem aktuellen Kreisbereich stilisierenKreise am Anfang und am Ende des Bereichs Schieberegler
https://jsfiddle.net/agghvm9t/ diese Geige ist
Dies ist, wie weit ich gekommen sind
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
</div>
Das ist mein css
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
@media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
Das ist mein ist jquery
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
Stellen Sie ein funktionierendes Beispielschnipsel oder eine Geige zur Verfügung. –
ja bieten eine funktionierende Verbindung von Beispiel – Sooraz
Ich aktualisierte die Frage, danke –