更改默认滑块JQ UI

Changing the default slider JQ UI

本文关键字：JQ UI 默认      更新时间：2023-09-26

使用JQ UI，我创建了一个标准滑块。我发现了如何更改它的一些参数：大小、最小值、最大值等，但从未找到放照片的地方。即：更改滑块。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#slider-vertical {
    height: 600px;
    background-color: #0F3;
}
</style>
<script>
$(function () {
    $("#slider-vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
        }
    });
});
</script>
</head>
<body>
<div id="slider-vertical"></div>
</body>
</html>

如果您想将绿色区域改为图像，可以将background-color改为background-image或仅更改为background，然后输入所需图像的URL或位置此处演示

#slider-vertical {
    height: 600px;
    background: url(backgroundImage.jpg);
}

如果你想让它同时在滑块的上方和下方，你可以通过给.ui-slider-range一个透明的背景来实现，就像一样

.ui-slider-range {
    /* If you want the same image as the top part of the slider. */
    /* Otherwise you can change the bottom portion here */
  background:transparent;
}

此处演示

相关文章：