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

Question

这是我的代码：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>

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

Answer 1

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

Answer 2

在roundSlider你有解决这个问题的svgMode 。

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

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

$("#slider").roundSlider({
  radius: 180,
  min: 10,
  max: 30,
  circleShape: "pie",
  sliderType: "min-range",
  value: 20,
  editableTooltip: false,
  startAngle: 315,
  tooltipFormat: "changeTooltip",
  
  svgMode: true,
  rangeColor: "#03a9f4",
  pathColor: "#eee",
  borderColor: "black",
  lineCap: "round"
  
});

检查以下演示： https ://jsfiddle.net/soundar24/7osfgxap/