How to store the value of circular slider in a variable and display it in console?

Question

I have written code for round slider which is mentioned below. I am unable to figure out how to store the value of the slider in a variable and display it in the console using javascript. I want to store the value of the tooltip in a variable and display it in the console so that it can be used for other functions.

$("#slider").roundSlider({
  radius: 180,
  min: 10,
  max: 30,
  startValue: 24,
  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";
}

body {
  background-color: black;
}

#slider {
  position: absolute;
  top: 20%;
  left: 40%;
  z-index: 1000;
}

.rs-control .rs-range-color {
  background-color: #45a8f8;
}

.rs-control .rs-path-color {
  background-color: #191917;
}

.rs-control .rs-handle {
  background-color: #4b8aff;
}

.rs-control .rs-bg-color {
  background-color: #000000;
}

#slider .rs-border {
  border-color: transparent;
}

#slider .rs-tooltip-text {
  font-size: 50px;
  font-weight: bold;
  font-color: white
}

.rs-tooltip.rs-tooltip-text {
  font-size: 19px;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-color: White;
  background-color: White;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js">
  .
</script>


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

Answer 1

As the documentation suggests, you can add several events to your roundSlider

beforeCreate, create, start, stop, change, drag

In this case, you can use the change event trigger.

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

});

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

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

function traceChange(e) {
  console.log(e.value);
}

body {
  background-color: black;
}

#slider {
  position: absolute;
  top: 20%;
  left: 40%;
  z-index: 1000;
}

.rs-control .rs-range-color {
  background-color: #45a8f8;
}

.rs-control .rs-path-color {
  background-color: #191917;
}

.rs-control .rs-handle {
  background-color: #4b8aff;
}

.rs-control .rs-bg-color {
  background-color: #000000;
}

#slider .rs-border {
  border-color: transparent;
}

#slider .rs-tooltip-text {
  font-size: 50px;
  font-weight: bold;
  font-color: white
}

.rs-tooltip.rs-tooltip-text {
  font-size: 19px;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-color: White;
  background-color: White;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js">
  .
</script>


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

Answer 2

You can add an onchange event on the slider tag in HTML and get the value in JavaScript using textContent.

Try this

const getValue = (e) => {
    let value = e.textContent.split('°')[0];
    console.log(value);
    console.log(e.textContent);
}

<div id="slider" onchange="getValue(this)"></div>