1

我已经为下面提到的圆形滑块编写了代码。我无法弄清楚如何将滑块的值存储在变量中并使用 javascript 在控制台中显示它。我想将工具提示的值存储在一个变量中并将其显示在控制台中，以便它可以用于其他功能。

$("#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>

4

2 回答 2

1

正如文档所建议的，您可以将几个事件添加到您的 roundSlider

beforeCreate, create, start, stop, change, drag

在这种情况下，您可以使用change事件触发器。

$("#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>

于 2021-06-21T06:26:07.373 回答
0

您可以在 HTML 中的滑块标记上添加onchange事件，并使用textContent在 JavaScript 中获取值。

尝试这个

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

<div id="slider" onchange="getValue(this)"></div>
于 2021-06-21T06:26:49.387 回答