如何在ASP.NET MVC 3中创建简单的范围滑块？

Question

如何在不使用外部库（如telerik或其他任何其他库）的情况下在ASP.NET MVC 3中创建简单范围滑块？

Answer 1

如果你是罚款jQuery用户界面：

jQuery UI Slider

示例代码：

<meta charset="utf-8"> 
    <style> 
    #demo-frame > div.demo { padding: 10px !important; }; 
    </style> 
    <script> 
    $(function() { 
     $("#slider-range-min").slider({ 
      range: "min", 
      value: 37, 
      min: 1, 
      max: 700, 
      slide: function(event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider-range-min").slider("value")); 
    }); 
    </script> 



<div class="demo"> 

<p> 
    <label for="amount">Maximum price:</label> 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 

<div id="slider-range-min"></div> 

</div><!-- End demo --> 



<div class="demo-description"> 
<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p> 
</div><!-- End demo-description --> 

Answer 2

MVC使用JavaScript来在客户端执行动态操作。使用图像和JavaScript创建滑块需要花费很多时间，并且一些开源库已经完成了广泛的研究。

Jquery和Jqueryui就是这样一个开放源代码的库，*微软每当在脚本文件夹中创建一个MVC项目时也会包含这些库。检查脚本文件夹在你的MVC项目，你可以看到类似jQueryUI的-1.8.11.js（版本可能会有所不同）

滑块样品与jQueryUI的：

http://jqueryui.com/demos/slider/

Answer 3

你可以拿通过Shield UI查看ASP.NET MVC Slider组件，这是在MVC视图中轻松创建功能强大的滑块的另一种方式。

剃刀代码看起来是这样的：

@(Html.ShieldSlider() 
     .Name("slider") 
     .Cls("slider") 
     .Min(0) 
     .Max(10) 
     .Value(4) 
     .Buttons(true) 
     .Ticks(ticks => ticks.Enabled(true)) 
     .Values(values => values.Template("{0:c}")) 
     .Tooltip(tooltip => tooltip.Enabled(true).Template("Price: <b>{0:c}</b>")))