css - 突出显示ion.rangeslider上的范围

在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

最佳答案

您可以在进度条（.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="" />

关于css - 突出显示ion.rangeslider上的范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53774901/