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/