0

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 }]' />

（上面代码的jsfiddle：https ://jsfiddle.net/chapkovski/Ljmh7190/ ）

是否可以使用 ion.RangeSlider 实现相同的效果？http://ionden.com/a/plugins/ion.rangeSlider/index.html

4

1 回答 1

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="" />

于 2018-12-14T08:13:16.787 回答