How to fill the background color inside of the circular range slider?And also how to increase the font size of the tooltip?

Question

This is my code: 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>

I can't seem to fill the color inside of the curve. Could anyone help me out with this? Thanks in advance!

Answer 1

In roundSlider you have the svgMode which resolves this problem.

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"
  
});

Check the below demo: https://jsfiddle.net/soundar24/7osfgxap/

Answer 2

PS : You are using the roundSlider plugin and not uiSlider.

So, in accordance with the doc, you can modify your element by assigning it an id ("slider" in your example).

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

In your CSS file you can add the styles you want:

#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;
}

Check the documentation : https://roundsliderui.com/document.html#class-names