在ion.rangeslider上突出显示一个范围

Question

在bootstrap-slider中，可以在滑块上突出显示某些范围：

例子：

​

// With JQuery
$('#ex22').slider({
    id: 'slider22',
    min: 0,
    max: 20,
    step: 1,
    value: 14,
    rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
                      { "start": 7, "end": 8, "class": "category2" },
                      { "start": 17, "end": 19 },
                      { "start": 17, "end": 24 },
                      { "start": -3, "end": 19 }]});

#slider22 .slider-selection {
	background: #81bfde;
}

#slider22 .slider-rangeHighlight {
	background: #f70616;
}

#slider22 .slider-rangeHighlight.category1 {
    background: #FF9900;
}

#slider22 .slider-rangeHighlight.category2 {
    background: #99CC00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.0/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.0/bootstrap-slider.js"></script>

<input id="ex22" type="text"
     data-slider-id="slider22"
     data-slider-min="0"
     data-slider-max="20"
     data-slider-step="1"
     data-slider-value="14"
     data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
                                   { "start": 7, "end": 8, "class": "category2" },
                                   { "start": 17, "end": 19 },
                                   { "start": 17, "end": 24 }, //not visible -  out of slider range
                                   { "start": -3, "end": 19 }]' />

​

(上面代码的篡改：https://jsfiddle.net/chapkovski/Ljmh7190/)

使用ion.RangeSlider？http://ionden.com/a/plugins/ion.rangeSlider/index.html可以实现同样的目标吗？

Answer 1

可以考虑进度条(.irs-line)线上的伪元素。

​

$(".js-range-slider").ionRangeSlider({
  type: "single",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  grid: true
});

.irs-line {
  position:relative;
}

.irs-line:before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:40%; /*where to start*/
  width:20%; /*the width*/
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.css">
<input type="text" class="js-range-slider" name="my_range" value="" />

​

如果您想要多个范围，您可以在同一元素上考虑梯度：

​

$(".js-range-slider").ionRangeSlider({
  type: "single",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  grid: true
});

.irs-line {
  position:relative;
}

.irs-line:before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:
    linear-gradient(blue,blue)    20px  0/20% 100%,
    linear-gradient(green,green)  200px 0/10% 100%,
    linear-gradient(yellow,yellow)100%  0/30px 100%;
    /*                            ^start  ^width */
  background-repeat:no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.css">
<input type="text" class="js-range-slider" name="my_range" value="" />

​