如何在ASP.NET MVC 3中創建簡單范圍滑塊？

Question

如何在不使用telerik或其他任何外部庫的情況下在ASP.NET MVC 3中創建簡單范圍滑塊？

Answer 1

如果您對jQuery UI沒問題：

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就是這樣一個開放源代碼的lib而且*每當你在scripts文件夾中創建一個MVC項目時，微軟也會包含這些庫。 檢查MVC項目中的腳本文件夾，你可以看到類似jquery-ui-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>")))