2017-02-22 15 views
0

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(); 
+1

Stellen Sie ein funktionierendes Beispielschnipsel oder eine Geige zur Verfügung. –

+0

ja bieten eine funktionierende Verbindung von Beispiel – Sooraz

+0

Ich aktualisierte die Frage, danke –

Antwort

1

Ich würde dies mit der Verwendung von Pseudoelementen nähern. Sie können eine haben: vor und eins: nach Pseudo-Element und da brauchen Sie nur 2 bis 1 am Anfang und eine am Ende, es könnte funktionieren:

.range-slider { 
    position:relative; 
} 
.range-slider:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    background-image: url("circle-image"); 
    width: 25px; 
    height: 25px; 
} 
.range-slider:after { 
    content: ""; 
    position: absolute; 
    right: 0; 
    background-image: url("circle-image"); 
    width: 25px; 
    height: 25px; 
} 

den Schiebe Kreis um Stil, können Sie versuchen, etwas wie dieses:

.range-slider__range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
      appearance: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: orange; 
    cursor: pointer; 
    -webkit-transition: background .15s ease-in-out; 
    transition: background .15s ease-in-out; 
    border: 1px solid orange; 
    box-shadow: inset 0 0 0 6px #fff; 
} 
+0

Das funktioniert, und vielleicht haben Sie eine Idee, wie Sie den gleitenden Kreis zu stilisieren? Vielen Dank im Voraus –

+0

Ich habe meine Antwort erweitert, um auch den Kreis zu stylen. –

+0

Vielen Dank @adam –

Verwandte Themen