Ion.RangeSlider 2.0.3

Question

Sto cercando di utilizzare Ion.RangeSlider 2.0.3

URL: http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

Quindi voglio modificare tale dispositivo di scorrimento con tre colori. Sinistra, Medio, Destra allo stesso modo. Ho allegato questa immagine per avere un'idea di ciò di cui ho bisogno.

quindi ho bisogno del vostro aiuto per personalizzare il dispositivo di scorrimento.

Grazie.

Answer 1

ho fatto la cosa simile. Ecco i relativi segmenti di codice css e javascript per raggiungerlo. diciamo che voglio sinistra verde, a metà lato giallo e rosso a destra, poi

CSS

.irs-line-left { 
    background: #66b032; 
    width: 60%; 
} 

.irs-line-mid { 
    background: #FFBF00; 
} 

.irs-line-mid:before { 
    content: ''; 
    background-color: #FF0000; 
    position: absolute; 
    left: 54%; 
    top: 0; 
    right: 0; 
    bottom: 0; 
} 

.budget-page .irs-line-right { 
    background: #FF0000; 
    width: 40%; 
} 

.budget-page .irs-line-mid { 
    width: 0 !important; 
} 

.irs-bar { 
    background: #FFBF00; 
} 

Ora qui è il trucco. Quando si modificano i due punti, è necessario modificare la larghezza del lato sinistro e destro per modificare dinamicamente la larghezza del colore.

sezione Javascript.

var iri_line_left = $(".irs-line-left"); 
var iri_line_right = $(".irs-line-right"); 

$("#color-slider").ionRangeSlider({ 
     type: "double", 
     min: 0, 
     max: 100, 
     from: 60, 
     to: 80, 
     grid: true, 
     onChange: function (data) { 
      var leftWidth = Math.ceil(data.from_percent); 
      var rightWidth = 100 - leftWidth; 

      // set left side width 
      iri_line_left.css({ 'width': leftWidth + "%" }); 

      // set right side width 
      iri_line_right.css({ 'width': rightWidth + "%" }); 

     } 
    }); 

Spero che questo ti possa aiutare.

Answer 2

può essere ben

.irs-line { 
// needs latest Compass, add '@import "compass"' to your scss 
@include background-image(linear-gradient(left, #32ff6c 0%,#28ff57 33%,#207cca 33%,#2989d8 66%,#ff3030 66%,#ff0000 100%)); 
}