改变离子范围滑块手柄的颜色

Question

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

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

它变成正方形：

（最初它看起来像一条细红线： )

我究竟做错了什么？

演示

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

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

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

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

Answer 1

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

$(".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="" />