jquery - 创建 jQuery 滑块以具有从 1 到 10 的评分系统

Question

我想创建一个具有看起来像图像中的评级系统的滑块（颜色不需要匹配，只需数字）。

我知道我应该使用

$("#slider").slider();

位，如下所示：http: //docs.jquery.com/UI/Slider，但我不太了解如何构建最小（0,5 或 1）、最大（10）和步骤（0,5或 1) 在里面。另外，在那之后，我有一个按钮

<a href="#linkToOtherPage" data-direction="reverse" data-role="button" data-theme="b">Save</a> 

当它被点击时，我希望它显示一个警报，表明所选评级已保存。有人知道该怎么做吗？

编辑

刚刚发现 jquery-mobile 以另一种方式处理滑块。在这种情况下，我使用的是 jQuery-mobile。

Answer 1

$("#slider").slider({ max: 10, min: 1, step: 0.5);

Answer 2

未经测试，但从您引用的文档看来，这应该可以解决问题：

$( "#slider" ).slider( { min: 0.5,
                           max: 10,
                           step: 0.5,
                           value: 5 } );

要显示滑块中的值并将其显示在警报中，请尝试以下操作：

<script>

  function saveSlider() {
    var value = $( "#slider" ).slider( "option", "value" );
    alert ("you have selected the value " + value);
  }

</script>

<input type="button" value="click me" onClick="saveSlider();" />

Answer 3

发现我需要使用 jQuery-mobile 滑块功能。现在用这个：

        <input type="range" name="slider-mini" id="slider-mini" value="5" min="1" max="10" data-highlight="true" data-mini="true" />
        <script>
          function saveSlider() {
            var value = $( "#slider-mini" ).val();
            alert ("You have selected the value: " + value);
          }

        </script>

它有步骤而不是 0,5，但现在没关系。