Ticks.cshtml

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@using Syncfusion.EJ2.DropDowns
@using Syncfusion.EJ2.Buttons
@using EJ2MVCSampleBrowser.Models
@section ControlsSection{
    <div class="col-lg-8 control-section">
        <div class="control-wrapper">
            <div class='sliderwrap'>
                <label class="userselect">Default Slider</label>
                <div id='default'></div>
                @Html.EJS().Slider("default").Min(0.1).Max(0.9).Value(0.3).Enabled(true).Step(0.05).Ticks( new SliderTicksData { Placement = Placement.Before, LargeStep = 0.20, SmallStep = 0.05, ShowSmallTicks = true }).Render()
            </div>
            <div class='sliderwrap'>
                <label class="userselect">Range Slider</label>
                <div id='range'></div>
                @Html.EJS().Slider("range").Min(0).Max(100).Enabled(true).Step(5).Value(ViewBag.sliderValue).Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Type(SliderType.Range).Render()
            </div>
        </div>
    </div>

    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Placement</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        @Html.EJS().DropDownList("placement").Index(0).Change("dropDownChange").Placeholder("Ticks Position").DataSource((IEnumerable<Object>)ViewBag.dataSource).Fields(new DropDownListFieldSettings { Text = "text", Value = "id" }).Render()
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Disabled</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div style="padding-left: 0;padding-top: 0">
                            @Html.EJS().CheckBox("checked").Change("onChange").Render()
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        function onChange(args) {
            var defaultObj = document.getElementById('default').ej2_instances[0];
            var range = document.getElementById('range').ej2_instances[0];
            defaultObj.enabled = !args.checked;
            range.enabled = !args.checked;
        }
        function dropDownChange() {
            var dropdown = document.getElementById('placement').ej2_instances[0];
            var defaultObj = document.getElementById('default').ej2_instances[0];
            var range = document.getElementById('range').ej2_instances[0];

            defaultObj.ticks = { placement: dropdown.value };
            defaultObj.dataBind();
            range.ticks = { placement: dropdown.value };
            range.dataBind();
        }
    </script>

    <style>
        .control-section .control-wrapper {
            width: 80%;
            margin: 0 auto;
            min-width: 185px;
        }

        .sliderwrap {
            margin-top: 45px;
        }

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

        .sliderwrap label {
            padding-bottom: 50px;
            font-size: 13px;
            font-weight: 500;
            margin-top: 15px;
        }

        .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 Ticks in ASP.NET MVC Range Slider control. Explore here for more details."/>
                }

@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the default rendering of Slider component. Drag the thumb over the bar for selecting the values
            between min and max.
        </p>
    </div>
}
@section Description{
    <div id="description">
        <p>The Slider component allows the user to select a value or range of values in-between a min and max range, by dragging the thumb over the slider bar. There are three types of sliders available:</p>
        <ul>
            <li>Default - allows us to select a single value</li>
            <li>
                MinRange – allows us to select a single value, but highlights with a range selection from the min value to the current
                handle value
            </li>
            <li>Range – allows us to select a range of values with two handles, where the handles was connected with a range selection</li>
            <p>
                In this demo we can see the Default, MinRange and Range slider types.
            </p>
            <p>
                More information on the Slider instantiation can be found in this
                <a target="_blank" href="http://ej2.syncfusion.com/aspnet-core/documentation/slider/ticks.html?syntax=razor">
                    documentation section
                </a>
            </p>
        </ul>
    </div>
}


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