How to create simple range slider in ASP.NET MVC 3?

Question

How to create simple range slider in ASP.NET MVC 3 without using external libraries such as telerik or any other?

Answer 1

MVC uses javascript to perform dynamic operations at the client side. Creating a slider using images and javascript will take much time and extensive research which some opensource libs have already done.

Jquery and Jqueryui is one such lib which is open source and *Microsoft also includes these libs whenever you create a MVC project in scripts folder. Check the scripts folder in your MVC project and you can see something like jquery-ui-1.8.11.js (version may vary)

Slider sample with jqueryui:

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

Answer 2

If you are fine with jQuery UI:

jQuery UI Slider

Sample Code:

<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 3

You can take a look at the ASP.NET MVC Slider component by Shield UI, which is another way to easily create a powerful slider in your MVC views.

Razor code looks like this:

    @(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>")))