创建jQuery滑块以使评级系统从1到10

Question

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

我知道我应该使用

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

位，如下所示：http://docs.jquery.com/UI/Slider，但我真的不明白如何在其中构建min（0,5或1），max（10）和step（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，但现在还可以。