0

如果我尝试将离子范围滑块的默认颜色（可在此处获得：https ://github.com/IonDen/ion.rangeSlider ）从红色（默认）更改为蓝色，如下所示：

.irs-slider.single {
    background: blue;
}

它变成正方形：

在此处输入图像描述

（原来它看起来像一条细红线在此处输入图像描述：）

我究竟做错了什么？

演示

https://jsfiddle.net/chapkovski/xpvt214o/995048/

$(".js-range-slider").ionRangeSlider({
        type: "single",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });
.irs-slider.single {
    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="" />

4

5 回答 5

6

下面的代码段用于将整个离子范围滑块颜色更改为任何颜色

$(".js-range-slider").ionRangeSlider({
  type: "single",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  grid: true
});
    .irs--flat .irs-handle>i:first-child {
    background-color: #4e73df!important;//Replace With Your color code
}
.irs--flat .irs-bar {
    background-color: #4e73df!important;//Replace With Your color code
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
    background-color: #4e73df!important;//Replace With Your color code
}
.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
    border-top-color: #4e73df!important;//Replace With Your color code
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<input type="text" class="js-range-slider" name="my_range" value="" />

于 2019-05-30T10:00:07.703 回答
1

我用这样的js脚本改变，我希望你会用它

onChange: function(data) {
let id = $(data.slider[0]['parentNode']).attr('id');

if (data.from < 50) {
  $('#' + id).find('.irs-bar--single').css('background-color', '#ee22fa');
  $('#' + id).find('.irs-single').css('background-color', '#ee22fa');
  $('#' + id).find('.irs-handle > i:first-child').css('background-color', '#ee22fa');
} else if (data.from <= 60) {
  $('#' + id).find('.irs-bar--single').css('background-color', '#ed5565');
  $('#' + id).find('.irs-single').css('background-color', '#ed5565');
  $('#' + id).find('.irs-handle > i:first-child').css('background-color', '#ed5565');
}
}

https://jsfiddle.net/satria08/v9u0jyt6/

于 2020-02-27T05:19:09.637 回答
0

背景是图像（https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/img/sprite-skin-flat.png），因此您不能简单地更改颜色。您可以考虑使用渐变来创建具有所需颜色的相似图像。因为它是一条简单的线，所以应该很容易。

$(".js-range-slider").ionRangeSlider({
  type: "single",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  grid: true
});
.irs-slider.single {
  background: linear-gradient(blue, blue) center/2px 100% 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-12T14:54:13.940 回答
0 
$('#traffic_percent').ionRangeSlider({
  min: 0,
  max: 100,
  type: 'single',
  prefix: "%",
  from: $('#traffic_percent').val(),
  onChange: function(data) {
    var color = $('#traffic_percent').val();

    if (color > 50) {
      $('#your div id').find(".irs-bar").css("background", "#6fda43");
    } else {
      $('#your div id').find(".irs-bar").css("background", "#fb8c8a");
    }
  }
});
于 2019-06-27T06:32:03.433 回答
0

查看演示，.single该类用于工具提示元素。但是我可以像这样将细红色更改为蓝色：

.irs--flat .irs-handle>i:first-child {
    background: blue;
}
于 2018-12-12T14:42:37.233 回答