API.cshtml

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@using Syncfusion.EJ2.Buttons
@using EJ2MVCSampleBrowser.Models
@section ControlsSection{

    <div class="col-lg-8 control-section">
        <div class="content-wrapper" id="all-option-sample">
            <div class="sliderwrap">
                @Html.EJS().Slider("slider").Value(30).Min(0).Max(100).Type(SliderType.MinRange).Created("onCreated").Change("onSliderChange").Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.Before, ShowOn = TooltipShowOn.Hover }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 20 }).Render()
            </div>
        </div>
    </div>

    <div class="col-lg-4 property-section" id="all-option-table">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Value</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().NumericTextBox("value").Step(1).Value(30).Created("onValueCreated").Change("onValueChange").Render()
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Min</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().NumericTextBox("min").Step(1).Value(0).Change("onMinChange").Render()
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Max</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().NumericTextBox("max").Step(1).Value(100).Change("onMaxChange").Render()
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Step</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().NumericTextBox("step").Value(1).Step(1).Change("onStepChange").Render()
                        </div>
                    </td>
                </tr>
                <tr id="desktop-checkbox-row-1">
                    <td style="width: 50%">
                        <div class="userselect" style="padding-left: 0">
                            @Html.EJS().CheckBox("button").Checked(false).Label("Show Buttons").Change("onShowButtonChange").Render()
                        </div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div style="padding-left: 0;padding-top: 0">
                            @Html.EJS().CheckBox("disabled").Checked(false).Label("Disabled").Change("onDisableChange").Render()
                        </div>
                    </td>
                </tr>
                <tr id="desktop-checkbox-row-2">
                    <td style="width: 50%;padding-right: 10px">
                        <div style="padding-left: 0;padding-top: 0">
                            @Html.EJS().CheckBox("readOnly").Checked(false).Label("Readonly").Change("onReadOnlyeChange").Render()
                        </div>
                    </td>
                    <td style="width: 50%">
                        <div class="userselect" style="padding-left: 0">
                            @Html.EJS().CheckBox("orientation").Checked(false).Label("Vertical Orientation").Change("onOrientationChange").Render()
                        </div>
                    </td>
                </tr>
                <tr id="mobie-checkbox-row-1">
                    <td style="width: 50%">
                        <div class="userselect">Show Buttons</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().CheckBox("mb-button").Checked(false).Change("onShowButtonChange").Render()
                        </div>
                    </td>
                </tr>
                <tr id="mobile-checkbox-row-2">
                    <td style="width: 50%">
                        <div class="userselect">Disabled</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().CheckBox("mb-disabled").Checked(false).Change("onDisableChange").Render()
                        </div>
                    </td>
                </tr>
                <tr id="mobile-checkbox-row-3">
                    <td style="width: 50%">
                        <div class="userselect">Vertical Orientation</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().CheckBox("mb-orientation").Checked(false).Change("onOrientationChange").Render()
                        </div>
                    </td>
                </tr>
                <tr id="mobile-checkbox-row-4">
                    <td style="width: 50%">
                        <div class="userselect">Readonly</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().CheckBox("mb-readOnly").Checked(false).Change("onReadOnlyeChange").Render()
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
}
<script>
    var slider, valueObj;
    function onCreated(args) {
        if (document.getElementById('right-pane')) {
        document.getElementById('right-pane').addEventListener('scroll', onScroll);
        }
         slider = document.getElementById('slider').ej2_instances[0];
    }

    function onValueCreated(args) {
         valueObj = document.getElementById('value').ej2_instances[0];
    }

    function onSliderChange(args) {
         valueObj.value = args.value;
    }
    function onValueChange(args) {
        slider.value = args.value;
    }
    function onMinChange(args) {
        slider.min = args.value;
    }
    function onMaxChange(args) {

        slider.max = args.value;
    }
    function onStepChange(args) {

        slider.step = args.value;
    }
    function onShowButtonChange(args) {
        slider.showButtons = args.checked;
    }
    function onDisableChange(args) {
        slider.enabled = !args.checked;
    }
    function onOrientationChange(args) {
        slider.orientation = args.checked ? 'Vertical' : 'Horizontal';

    }
    function onReadOnlyeChange(args) {
        slider.readonly = args.checked;
    }

    function onScroll() {
        var sliderObj = [slider];
        sliderObj.forEach(function (slider) {
            // Refreshing each slider tooltip object position
            slider.refreshTooltip(slider.tooltipTarget);
        });
    }

</script>
<style>
    .sb-mobile-prop-pane #all-option-table #desktop-checkbox-row-1,
    .sb-mobile-prop-pane #all-option-table #desktop-checkbox-row-2 {
        display: none;
    }

    .sb-mobile-prop-pane #all-option-table #mobie-checkbox-row-1,
    .sb-mobile-prop-pane #all-option-table #mobile-checkbox-row-2,
    .sb-mobile-prop-pane #all-option-table #mobile-checkbox-row-3,
    .sb-mobile-prop-pane #all-option-table #mobile-checkbox-row-4 {
        display: table-row;
    }

    #all-option-table #mobie-checkbox-row-1,
    #all-option-table #mobile-checkbox-row-2,
    #all-option-table #mobile-checkbox-row-3,
    #all-option-table #mobile-checkbox-row-4 {
        display: none;
    }

    #all-option-table .property-panel-section .property-panel-content table#property tr {
        height: 50px;
    }

    #all-option-sample .e-slider-container.e-horizontal {
        margin-top: 160px;
    }

    #all-option-sample .e-slider-container.e-vertical {
        margin-left: 40%;
    }

    #all-option-sample.content-wrapper {
        height: 363px;
        width: 50%;
        margin: 0 auto;
        min-width: 185px;
    }

    .sliderwrap {
        height: 340px;
    }

    .e-bigger .content-wrapper {
        width: 50%;
    }

    .sliderwrap label {
        padding-bottom: 26px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
        text-align: left;
        width: 100%;
    }

    .userselect {
        -webkit-user-select: none;
        /* Safari 3.1+ */
        -moz-user-select: none;
        /* Firefox 2+ */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;
        /* Standard syntax */
    }
</style>

@section Meta{
                    <meta name="description" content="This example demonstrates the API in ASP.NET MVC Range Slider control. Explore here for more details."/>
                }

@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the customization of Slider component by using its properties from property pane. Select any
            combination of properties from property pane to customize Slider component.
        </p>

    </div>
}

@section Description{
    <div id="description">
        <p>In this demo, default slider is rendered with minimal configuration.</p>
        <p>This sample can be customized further with the combination of Slider properties from the property pane. For example,</p>
        <ul>
            <li>Min, max, value and Steps can be changed from the property pane.</li>
            <li>Ticks can be enabled by selecting the ticks placement from the property pane.</li>
            <li>Tooltip can be enabled by checking Show tooltip checkbox from property pane.</li>
            <li>Vertical orientation can be enabled by checking vertical orientation from property pane and so on.</li>
        </ul>

    </div>
}



@section Title{
                    <title>ASP.NET MVC Range Slider API Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of API in ASP.NET MVC Range Slider Control</h1>
                }