Ion.RangeSlider 2.0.3 [英] Ion.RangeSlider 2.0.3

问题描述

我想尝试使用 Ion.RangeSlider 2.0.3

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

所以我想用三种颜色修改那个滑块。左，中，右同样。

So I want to modify that slider with three colors. Left, Middle, Right likewise. I have attached this image for get idea what I want to need.

因此，我需要您的帮助来自定义此滑块。

So i need your help to customize this slider.

。

推荐答案

我做了类似的事情。这里是相关的css和javascript代码段来实现它。
假设我想要左侧绿色，中间黄色和右侧红色，然后

I did the similar thing. Here is the related css and javascript code segments to achieve it. Let say I want left side green, mid yellow and right side red, then

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

现在这里是窍门。当您更改两点时，我们需要更改左右两侧的宽度，以动态更改颜色宽度。

Now here is the trick. When you change the two points we need to change the left and right side width to change the color width dynamically.

JavaScript部分。

Javascript section.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！