Ion.RangeSlider 2.0.3

Question

Ich versuche Ion.RangeSlider 2.0.3

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

Deshalb möchte ich, dass die Schieber mit drei Farben ändern. Links, Mitte, rechts ebenfalls. Ich habe dieses Bild angebracht, um eine Idee zu bekommen, was ich brauchen möchte.

Also ich brauche Ihre Hilfe diese Schieberegler anpassen.

Danke.

Answer 1

ich die ähnliche Sache tat. Hier sind die verwandten CSS- und Javascript-Code-Segmente, um es zu erreichen. Lassen Sie sagen, ich linke Seite grün, gelb Mitte und rechts rot will, dann

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; 
} 

hier nun der Trick ist. Wenn Sie die zwei Punkte ändern, müssen wir die Breite der linken und rechten Seite ändern, um die Farbbreite dynamisch zu ändern.

Javascript Abschnitt.

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 + "%" }); 

     } 
    }); 

Ich hoffe, dies wird Ihnen helfen.

Answer 2

kann gut sein

.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%)); 
}