时间戳

首页 > 解决方案 > 如何填充圆形范围滑块内的背景颜色？以及如何增加工具提示的字体大小？

javascript - 如何填充圆形范围滑块内的背景颜色？以及如何增加工具提示的字体大小？

问题描述

这是我的代码：HTML：

 <div id="slider"></div>

CSS：

body{
  background: black;}[enter image description here][1]


<script>
$("#slider").roundSlider({
radius: 180,
min: 10,
max: 30,
circleShape: "pie",
sliderType: "min-range",
value: 50,
editableTooltip: false,
startAngle: 315,
tooltipFormat: "changeTooltip",

});

window.updateBox = function (e) {
var profit = Math.round(this.options.value * 0.005);
}

window.changeTooltip = function (e) {
updateBox.call(this);
return e.value + "°C" ;
}
</script>

我似乎无法填充曲线内部的颜色。谁能帮我解决这个问题？提前致谢！

标签： javascripthtmljquerycssround-slider

解决方案

PS：您使用的是roundSlider插件而不是uiSlider。

因此，根据文档，您可以通过为其分配一个 id（在您的示例中为“slider”）来修改您的元素。

$("#slider").roundSlider({
     radius: 80,
     width: 14,
     svgMode: true
     handleSize: "+8",
     handleShape: "dot",
     sliderType: "min-range",
     value: 40
});

在您的 CSS 文件中，您可以添加所需的样式：

#slider .rs-range-color  {
    background-color: #ff0000;
}
#slider .rs-handle:after  {
    background-color: #000000;
}
#slider .rs-border  {
    border-color: #ff0000;
}
#slider .rs-tooltip-text  {
    font-size: 18px;
}

检查文档：https ://roundsliderui.com/document.html#class-names

推荐阅读