Ion.RangeSlider 2.0.3

Question

我正在尝试使用 Ion.RangeSlider 2.0.3

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

所以我想用三种颜色修改那个滑块。左、中、右亦然。我附上这张图片是为了了解我需要什么。

所以我需要你的帮助来定制这个滑块。

谢谢。

Answer 1

可以很好

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

Answer 2

我也做过类似的事情。这是实现它的相关 css 和 javascript 代码段。假设我想要左侧绿色、中间黄色和右侧红色，那么

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

技巧来了。当你改变这两个点时我们需要改变左右两侧的宽度来动态改变颜色宽度。

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

        }
    });

希望对您有所帮助。

Ion.RangeSlider 2.0.3

Ion.RangeSlider 2.0.3

html

javascript

css

jquery

slidetoggle