Question

我有一个圆形滑块，我是在一些网站的帮助下制作的。现在我尝试读取滑块的当前值并在数据库中存储值。但我正在努力获得滑块值。默认情况下，滑块显示该值。但是无法使用它。我需要将此值存储在变量中并进一步使用它。有人可以帮忙吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery roundSlider - JS Bin</title>

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
  <script src="//cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
</head>

<body>
  <h2>roundSlider</h2>  
  <div id="slider"></div>
  <div id="range"></div>
</body>
</html>


$("#slider").roundSlider(
{
        value:0,
        min: 0,
        max: 100,
        step: 1,
        sliderType: "min-range",
        slide: function(event, ui) { 
          alert(ui.value);
        }

    }
);

Answer 1

如果值已更改，您可以通过更改事件确定

change( event, ui )

事件（事件对象保证传递给事件处理程序）
ui：handle（表示已更改的句柄），handleIndex（已移动的句柄的数字索引），值（滑块的当前值。）

你必须写这样的变更事件

$("#slider").roundSlider(
{
        value:0,
        min: 0,
        max: 100,
        width: 30,
        step: 1,
        sliderType: "min-range",
         change: function (args) {
                console.log(args.value);
            $('#range').html(args.value)
         }        
    }
);

请参阅demo此处

Answer 2

附加此事件处理程序...

$("#slider").roundSlider({
    change: function (e) {
        console.log(e.value);
    }
});

当你只读取提交等的值时，你可以直接读取它，在其他情况下，可以在更改未完成时读取值

Answer 3

使用drag Fiddle

可以使用$("#slider").roundSlider("option", "value")事件和外部活动

JS：

$("#slider").roundSlider(
{
        value:0,
        min: 0,
        max: 100,
        step: 1,
        sliderType: "min-range",
        drag: function (event, ui) {
            console.log(this.getValue());
        },
        slide: function(event, ui) { 
          alert(ui.value);
        }

    }
);

如何使用jQuery读取圆形滑块的值？

3 个答案: