javascript - 如何使用图像自定义 slider 处理程序

Question

有人知道如何在 JQuery Range Slider 中自定义处理程序吗？我一直在互联网上搜索并且有各种各样的答案，其中大多数指向更改 ui-slider-handle 类设置背景与您想要显示的图像。好吧，我已经尝试了一切，但它没有改变任何东西。也许我错过了什么。我给你看我的代码

这些是我从 jquery-ui 覆盖的类。库中还有更多，但这些是我已经覆盖的。注意我已经在 ui-slider ui-slider-handle 类中设置了图像

slider .css

.ui-slider-horizontal {
    height: .2em;
    top: .15em;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.6em;
    margin-left: -.6em;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-color: red;
    background-position: 0 0;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: grey url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
    color: #222222;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    background: url(../images/handle.png) no-repeat;
    overflow: hidden;
    border: none;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}

这是我的html

<script>
    $(function() {
        $("#slider-range1").slider({
            animate: "fast",
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function(event, ui) {
                $("#amount-min1").val(ui.values[0] + "€");
                $("#amount-max1").val(ui.values[1] + "€");
            }
        });
        $("#amount-min1").val($("#slider-range1").slider("values", 0) + "€");
        $("#amount-max1").val($("#slider-range1").slider("values", 1) + "€");
    });
</script>
<div class="filter-results">
    <div class="wrapper-title-range">
        <p class="text-title-range">Rango valoración</p>
    </div>
    <div class="wrapper-range">
        <div id="slider-range1">
        </div>
    </div>
    <p class="min-value">
        <input type="text" id="amount-min1" class="input-value min">
    </p>
    <p class="max-value">
        <input type="text" id="amount-max1" class="input-value max aligned-right">
    </p>
</div>

Answer 1

执行此操作的一种简单方法是在开始和停止幻灯片时使用 javascript 操纵样式。

    $(function() {
    $("#slider-range1").slider({
        animate: "fast",
        range: true,
        min: 0,
        max: 500,
        values: [75, 300],
        create: function( event, ui ) {
          $(".ui-slider-handle").show();
          $(".ui-slider-handle").css("background",'grey url("http://www.tramsy.com/www/img/share2.png") 50% 50% repeat-x');              
        },
        slide: function(event, ui) {
          $("#amount-min1").val(ui.values[0] + "€");
          $("#amount-max1").val(ui.values[1] + "€");              
        }
    });
    $("#amount-min1").val($("#slider-range1").slider("values", 0) + "€");
    $("#amount-max1").val($("#slider-range1").slider("values", 1) + "€");
});