Search results

How To

Value formatting using slider

Date Format

The Date formatting can be achieved in ticks and tooltip using renderingTicks and tooltipChange events respectively. The process of formatting is explained in the below sample.

razor
date-format.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    @Html.EJS().Slider("default").Min(1371081600000).Max(1371772800000).Step(86400000).TooltipChange("tooltipChangeHandler").RenderingTicks("renderingTicksHandler").ShowButtons(true).Tooltip(new SliderTooltipData { Placement = TooltipPlacement.Before, IsVisible = true }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 172800000, }).Render()
}

<script>
    function tooltipChangeHandler(args) {
        var totalMiliSeconds = Number(args.text);
        // Converting the current milliseconds to the respective date in desired format
        var custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    }
    function renderingTicksHandler(args) {
        var totalMiliSeconds = Number(args.value);
        // Converting the current milliseconds to the respective date in desired format
        var custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    }
</script>
public ActionResult DateFormat()
{
    return View();
}

ASP .NET Core - Slider - Date - Format

Time Format

The time formatting can be achieved same as the date formatting using renderingTicks and change events. The process of time formatting is explained in the below sample.

razor
time-format.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    @Html.EJS().Slider("default").Min(1373693400000).Max(1373715000000).Step(3600000).RenderingTicks("renderingTicksHandler").TooltipChange("tooltipChangeHandler").Tooltip(new SliderTooltipData { Placement = TooltipPlacement.Before, IsVisible = true }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 7200000 }).ShowButtons(true).Render()
}

<script type="text/javascript">
    function tooltipChangeHandler(args) {
        var totalMiliSeconds = Number(args.text);
        var custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
    }
    function renderingTicksHandler(args) {
        var totalMiliSeconds = Number(args.value);
        var custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
    }

</script>
public ActionResult TimeFormat()
{
    return View();
}

ASP .NET Core - Slider - Time - Format

Numeric Value Customization

The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.

razor
numeric-value.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
  <div id='kilometer'>
        @Html.EJS().Slider("kilometer").Min(0).Max(100).Step(1).Value("30").Tooltip(new SliderTooltipData { IsVisible = true, Format = "##.## Km" }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 20, SmallStep = 10, ShowSmallTicks = true, Format = "##.## Km" }).Render()
    </div>
    <div id='decimal'>
        @Html.EJS().Slider("decimalobj").Min(0.1).Max(0.2).Value("0.15").Step(0.01).Tooltip(new SliderTooltipData { IsVisible = true, Format = "##.#00" }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 0.02, SmallStep = 0.01, ShowSmallTicks = true, Format = "##.#00" }).Render()
    </div>
    <div id='slider'>
        @Html.EJS().Slider("sliderobj").Min(0).Max(100).Value("5").Step(1).Tooltip(new SliderTooltipData { IsVisible = true, Format = "##.## Km" }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 20, SmallStep = 10, ShowSmallTicks = true, Format = "##.## Km" }).Render()
    </div>
    }
public ActionResult NumericValue()
{
    return View();
}

ASP .NET Core - Slider - Format

Customize the bar

Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name e-slider-track for bar. The class can be overridden with our own color values like the following code snippet.

.e-control.e-slider .e-slider-track .e-range {
    background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}

You can also apply background color for a certain range depending upon slider values, using change event.

function change(args) {
    if (args.value > 0 && args.value <= 25) {
        // Change handle and range bar color to green when
        (sliderHandle).style.backgroundColor = 'green';
        (sliderTrack).style.backgroundColor = 'green';
    } else if (args.value > 25 && args.value <= 50) {
        // Change handle and range bar color to royal blue
        (sliderHandle).style.backgroundColor = 'royalblue';
        (sliderTrack).style.backgroundColor = 'royalblue';
    } else if (args.value > 50 && args.value <= 75) {
        // Change handle and range bar color to dark orange
        (sliderHandle).style.backgroundColor = 'darkorange';
        (sliderTrack).style.backgroundColor = 'darkorange';
    } else if (args.value > 75 && args.value <= 100) {
        // Change handle and range bar color to red
        (sliderHandle).style.backgroundColor = 'red';
        (sliderTrack).style.backgroundColor = 'red';
    }
}
razor
custom-bar.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    <div id='container'>
        <div class="col-lg-12 control-section">
            <div class="slider-content-wrapper">
                <div class="slider_container">
                    <div class="slider-labeltext slider_userselect">Height</div>
                    @Html.EJS().Slider("height_slider").RenderingTicks("renderingTicksHandler").TooltipChange("tooltipChangeHandler").Render()
                </div>
                <div class="slider_container">
                    <div class="slider-labeltext slider_userselect">Gradient color</div>
                    @Html.EJS().Slider("gradient_slider").Type(SliderType.MinRange).RenderingTicks("renderingTicksHandler").TooltipChange("tooltipChangeHandler").Render()
                </div>
                <div class="slider_container">
                    <div class="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
                    @Html.EJS().Slider("dynamic_color_slider").Type(SliderType.MinRange).Change("changeHandler").Created("createdHandler").Render()
                </div>
            </div>
        </div>
    </div>
}

<script type="text/javascript">
    var sliderTrack;
    var sliderHandle;
    function changeHandler(args) {
        if (args.value > 0 && args.value <= 25) {
            // Change handle and range bar color to green when
            (sliderHandle).style.backgroundColor = 'green';
            (sliderTrack).style.backgroundColor = 'green';
        } else if (args.value > 25 && args.value <= 50) {
            // Change handle and range bar color to royal blue
            (sliderHandle).style.backgroundColor = 'royalblue';
            (sliderTrack).style.backgroundColor = 'royalblue';
        } else if (args.value > 50 && args.value <= 75) {
            // Change handle and range bar color to dark orange
            (sliderHandle).style.backgroundColor = 'darkorange';
            (sliderTrack).style.backgroundColor = 'darkorange';
        } else if (args.value > 75 && args.value <= 100) {
            // Change handle and range bar color to red
            (sliderHandle).style.backgroundColor = 'red';
            (sliderTrack).style.backgroundColor = 'red';
        }
    }
    function createdHandler(args) {
        sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');
        sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
        (sliderHandle).style.backgroundColor = 'green';
        (sliderTrack).style.backgroundColor = 'green';
    }
</script>

<style>
.slider-content-wrapper {
    width: 40%;
    margin: 0 auto;
    min-width: 185px;
}

.slider-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 */
}

.slider-labeltext {
    text-align: left;
    font-weight: 500;
    font-size: 13px;
    padding-bottom: 10px;
}

#height_slider .e-handle,
#gradient_slider .e-handle {
    height: 20px;
    width: 20px;
    margin-left: -10px;
    top: calc(50% - 10px);
}

.slider_container {
    margin-top: 40px;
}

#height_slider .e-tab-handle::after {
    background-color: #f9920b;
}

#height_slider .e-slider-track {
    height: 8px;
    top: calc(50% - 4px);
    border-radius: 0;
}

#gradient_slider .e-range {
    height: 6px;
    top: calc(50% - 3px);
    border-radius: 5px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8));
    background: -webkit-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
    background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
    background: -moz-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}

#gradient_slider .e-slider-track {
    height: 8px;
    top: calc(50% - 4px);
    border-radius: 5px;
}

</style>
public ActionResult TimeFormat()
{
    return View();
}

ASP .NET Core - Slider - Bar Customization

Customize the limits

Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized. Here, the limit bar is customized with different background color. By default, the slider has class e-limits for limits bar. You can override the class with our own color values as given in the following code snippet.

.e-slider-container.e-horizontal .e-limits {
    background-color: rgba(69, 100, 233, 0.46);
}
razor
custom-limits.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
   <div id='container'>
        <div class="col-lg-8 control-section">
            <div class="content-wrapper">
                <div class="sliderwrap">
                    <label class="userselect">MinRange Slider With Limits</label>
                     @Html.EJS().Slider("minrange").Min(0).Max(100).Value(25).Type(SliderType.Default).Enabled(true).Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.Before, ShowOn = TooltipShowOn.Focus }).Limits(new SliderLimitData { Enabled = true, MinStart = 10, MinEnd = 40 }).Render()
                </div>
                <div class="sliderwrap">
                    <label class="userselect">Range Slider With Limits</label>
                    @Html.EJS().Slider("range").Min(0).Max(100).Value(ViewBag.rangeValue).Type(SliderType.Range).Enabled(true).Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.Before, ShowOn = TooltipShowOn.Focus }).Limits(new SliderLimitData { Enabled = true, MinStart = 10, MinEnd = 40, MaxStart = 60, MaxEnd = 90}).Render()
                </div>
            </div>
        </div>         
    </div>
}


<style>

.content-wrapper {
  width: 52%;
  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;
  display: block;
}

.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 */
}

.property-custom td {
  padding: 5px;
}

#range .e-limits,
#minrange .e-limits {
  background-color: #ccc;
  background-color: rgba(69, 100, 233, 0.46);
}
</style>
public ActionResult TimeFormat()
{
    ViewBag.rangeValue = new int[] { 25, 75 };
    return View();
}

ASP .NET Core - Slider - Limit Customization

Customize the ticks

Slider view can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks. The ticks in slider allows you to easily identify the current value/values of the slider. It contains smallStep and largeStep. By default, slider has class e-tick for slider ticks. You can override the class as per your requirement. Refer to the following code snippet to render ticks.

.e-scale .e-tick.e-custom::before {
    content: '\e967';
    position: absolute;
}

Here, the color for rendered ticks has been applied through nth-child(child_number). The color is applied to the value of the child_number in the slider.

#ticks_slider .e-scale :nth-child(1)::before {
    color: red;
}
razor
custom-ticks.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    <div id='container'>
        <div class="col-lg-12 control-section">
            <div class="slider-content-wrapper">
                <div class="slider_container" id="slider_wrapper">
                    <div class="slider_labelText userselect">Dynamic ticks color</div>
                    <!-- Ticks slider element -->
                    @Html.EJS().Slider("ticks_slider").Type(SliderType.MinRange).Value(30).Enabled(true).Step(5).Ticks( new SliderTicksData { Placement = Placement.Before, LargeStep = 20 }).RenderingTicks("renderingTicksHandler_1").Render()
                </div>
                <div class="slider_container">
                    <div class="slider_labelText userselect">Ticks with legends</div>
                    <!-- Ticks slider element -->
                    @Html.EJS().Slider("slider").Value(30).Type(SliderType.MinRange).Enabled(true).Step(5).Ticks( new SliderTicksData { Placement = Placement.Both, LargeStep = 20, SmallStep=5 }).RenderingTicks("renderingTicksHandler_2").Render()
                </div>
            </div>
        </div>
    </div>
}

<script>
function renderingTicksHandler_1(args) {
    if (args.tickElement.classList.contains('e-large')) {
        args.tickElement.classList.add('e-custom');
    }
}

function renderingTicksHandler_2(args) {
    var li: any = args.ticksWrapper.getElementsByClassName('e-large');
    var remarks: any = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
    for (var i: number = 0; i < li.length; ++i) {
        (li[i].querySelectorAll('.e-tick-both')[1]).innerText = remarks[i];
    }
}
</script>
<style>

.slider-content-wrapper {
  width: 40%;
  margin: 0 auto;
  min-width: 185px;
}

.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 */
}

.slider_labelText {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 40px;
}

.slider_container {
  margin-top: 40px;
}

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

#ticks_slider .e-range {
  z-index: unset;
}

#ticks_slider .e-scale .e-tick {
  background-image: none;
  visibility: visible;
  font-family: 'e-icons';
}

#ticks_slider .e-scale {
  z-index: 0;
}

#ticks_slider .e-scale .e-custom::before {
  content: '\e967';
  position: absolute;
}

#ticks_slider .e-scale :nth-child(1)::before {
  color: red;
}

#ticks_slider .e-scale :nth-child(2)::before {
  color: blue;
}

#ticks_slider .e-scale :nth-child(3)::before {
  color: green;
}

#ticks_slider .e-scale :nth-child(4)::before {
  color: blueviolet;
}

#ticks_slider .e-scale :nth-child(5)::before {
  color: orange;
}

#ticks_slider .e-scale :nth-child(6)::before {
  color: pink;
}

#ticks_slider .e-scale .e-custom::before {
  font-size: 10px;
}

#ticks_slider .e-scale .e-custom::before {
  top: calc(50% + 1px);
  left: calc(50% - 5px);
}

#slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
  top: calc(50% + 1px);
  left: calc(0% - 5px);
}

#slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
  top: calc(50% + 1px);
  left: calc(100% - 6px);
}
</style>
public ActionResult TimeFormat()
{
    return View();
}

ASP .NET Core - Slider - Ticks Customization

Customize the thumb

Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class e-handle for slider thumb. You can override the following class as per your requirement. Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.

.e-control.e-slider .e-handle {
    background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
    background-color: transparent;
    height: 25px;
    width: 25px;
}
#square_slider.e-control.e-slider .e-handle {
    border-radius: 0%;
    background-color: #f9920b;
    border: 0;
}
#circle_slider.e-control.e-slider .e-handle {
    border-radius: 50%;
    background-color: #f9920b;
    border: 0;
}
#oval_slider.e-control.e-slider .e-handle {
    height: 25px;
    width: 8px;
    top: 3px;
    border-radius: 15px;
    background-color: #f9920b;
}
razor
custom-thumb.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    <div id='container'>
        <div class="col-lg-12 control-section">
            <div class="slider-content-wrapper">
                <div class="slider_container">
                    <div class="labelText slider-userselect">Square</div>
                    <!-- Square slider element -->
                    @Html.EJS().Slider("square_slider").Min(0).Max(100).Value(30).Enabled(true).Render()
                </div>
                <div class="slider_container">
                    <div class="labelText slider-userselect">Circle</div>
                    <!-- Circle slider element -->
                    @Html.EJS().Slider("circle_slider").Min(0).Max(100).Value(30).Enabled(true).Render()
                </div>
                <div class="slider_container">
                    <div class="labelText slider-userselect">Oval</div>
                    <!-- Oval slider element -->
                    @Html.EJS().Slider("oval_slider").Min(0).Max(100).Value(30).Enabled(true).Render()
                </div>
                <div class="slider_container">
                    <div class="labelText slider-userselect">Custom image</div>
                    <!-- Image slider element -->
                    @Html.EJS().Slider("image_slider").Value(30).Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.After}).Render()
                </div>
            </div>
        </div>
    </div>
}

<style>

.slider-content-wrapper {
  width: 40%;
  margin: 0 auto;
  min-width: 185px;
}

.slider-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 */
}

.labelText {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 10px;
}

.slider_container {
  margin-top: 40px;
}

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

#square_slider .e-handle {
  border-radius: 0;
  background-color: #f9920b;
  border: 0;
}

#circle_slider .e-handle {
  background-color: #f9920b;
  border-radius: 50%;
  border: 0;
}

#image_slider .e-handle {
  height: 25px;
  width: 24px;
  background-size: 24px;

}

#image_slider .e-handle {
  background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
}

#square_slider .e-tab-handle::after,
#circle_slider .e-tab-handle::after {
  background-color: #f9920b;
}

#image_slider .e-tab-handle::after {
  background-color: transparent;
}

#oval_slider .e-handle {
  height: 25px;
  width: 8px;
  top: 3px;
  border-radius: 15px;
  background-color: #f9920b;
}
</style>
public ActionResult TimeFormat()
{
    return View();
}

ASP .NET Core - Slider - Thumb Customization

Validate the slider using FormValidator

The Slider component can be validated using our FormValidator. The following steps walk-through slider validation.

  • Render slider component inside a form.
  • Bind changed event in the slider component to validate the slider value when the value changes.
  • Initialize and render FormValidator for the form using form ID.
  • Set the required property in the FormValidator rules collection. Here, the min property of slider that sets the minimum value in the slider component is set, and it has hidden input as enable validateHidden property is set to true.

Form validation is done either by ID or name value of the slider component. Above ID of the slider is used to validate it.

Using slider name: Render slider with name attribute. In the following code snippet, name attribute value of slider is used for form validation.

  • Validate the form using validate method, and it validates the slider value with the defined rules collection and returns the result. If user selects the value less than the minimum value, form will not submit.

  • Slider validation can be done during value changes in slider. Refer to the following code snippet.

// change event handler for slider
function onChanged(args) {
  formObj.validate();
}

The FormValidator has following default validation rules, which are used to validate the Slider component.

Rules Description Example
max Slider component must have value less than or equal to max number if max: 3, 3 is valid and 4 is invalid
min Slider component must have value greater than or equal to min number if min: 4, 5 is valid and 2 is invalid
regex Slider component must have valid value in regex format if regex: '/4/, 4 is valid and 1 is invalid
range Slider component must have value between range number if range: [4,5], 4 is valid and 6 is invalid
razor
form-validator.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    <div id='container'>
        <div class="col-lg-12 control-section">
            <div class="content-wrapper" style="margin-bottom: 25px;overflow-x: hidden">
                <div class="form-title">
                    <span>Min</span>
                </div>
                <form id="formMinId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            @Html.EJS().Slider("min-slider").Value(30).Enabled(true).Changed("onMinChanged").Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Render()
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Max</span>
                </div>
                <form id="formMaxId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            @Html.EJS().Slider("max-slider").Value(30).Enabled(true).Changed("onMaxChanged").Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Render()
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Value</span>
                </div>
                <form id="formValId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            @Html.EJS().Slider("val-slider").Value(30).Enabled(true).Changed("onValChanged").Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Render()
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Range</span>
                </div>
                <form id="formRangeId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            @Html.EJS().Slider("range-slider").Value(30).Enabled(true).Changed("onRangeChanged").Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Render()
                        </div>
                    </div>
                </form>
                <div class="form-title">
                    <span>Custom</span>
                </div>
                <form id="formCustomId" class="form-horizontal">
                    <div class="form-group">
                        <div class="e-float-input">
                            @Html.EJS().Slider("custom-slider").Type(SliderType.Range).Enabled(true).Changed("onCustomChanged").Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true }).Render()
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
}


<script type="text/javascript">
    var minOptions = {
        rules: {
            'min-slider': {
                validateHidden: true,
                min: [40, "You must select value greater than or equal to 40"]
            }
        }
    };

    var formMinId = document.getElementById('formMinId');
    // Initialize Form validation
    var formMinObj = new ej.inputs.FormValidator(formMinId, minOptions);

    function onMinChanged(args) {
        // validate the slider value in the form
        formMinObj.validate();
    }

    var maxOptions = {
        rules: {
            'max-slider': {
                validateHidden: true,
                max: [40, "You must select value less than or equal to 40"]
            }
        }
    };

    var formMaxId = document.getElementById('formMaxId');
    // Initialize Form validation
    var formMaxObj = new ej.inputs.FormValidator(formMaxId, maxOptions);

    function onMaxChanged(args) {
        // validate the slider value in the form
        formMaxObj.validate();
    }

    var valOptions = {
        rules: {
            'val-slider': {
                validateHidden: true,
                regex: [/40/, "You must select value equal to 40"]
            }
        }
    };

    var formValId = document.getElementById('formValId');
    // Initialize Form validation
    var formValObj = new ej.inputs.FormValidator(formValId, valOptions);

    function onValChanged(args) {
        // validate the slider value in the form
        formValObj.validate();
    }

    var rangeOptions = {
        rules: {
            'range-slider': {
                validateHidden: true,
                range: [40, 80, "You must select values between 40 and 80"]
            }
        }
    };

    var formRangeId = document.getElementById('formRangeId');
    // Initialize Form validation
    var formRangeObj = new ej.inputs.FormValidator(formRangeId, rangeOptions);

    function onRangeChanged(args) {
        // validate the slider value in the form
        formRangeObj.validate();
    }

    var customOptions = {
        rules: {
            'custom-slider': {
                validateHidden: true,
                range: [validateRange, "You must select values between 40 and 80"]
            }
        }
    };

    var formCustomId = document.getElementById('formCustomId');
    // Initialize Form validation
    var formCustomObj = new ej.inputs.FormValidator(formCustomId, customOptions);

    function onCustomChanged(args) {
        // validate the slider value in the form
        formCustomObj.validate();
    }

    function validateRange(args) {
        var SliderCustomObj = document.getElementById('custom-slider').ej2_instances[0];
        return SliderCustomObj.value[0] >= 40 && SliderCustomObj.value[1] <= 80;
    }
</script>

<style>

.highcontrast form {
    background: #000000
}

/* csslint ignore:start */
.highcontrast label.e-custom-label,
.highcontrast label.e-float-text,
.highcontrast label.salary,
.highcontrast input::placeholder,
.highcontrast .e-float-input label.e-float-text {
    color: #fff !important;
    line-height: 2.3;
}
/* csslint ignore:end */

.e-error,
.e-float-text {
    font-weight: 500;
}

table,
td,
th {
    padding: 5px;
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

form {
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
    border-radius: 5px;
    background: #f9f9f9;
    padding: 23px;
    padding-bottom: 20px;
    margin: auto;
    max-width: 650px;
}

.form-title {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    color: black;
}
</style>
public ActionResult TimeFormat()
{
    return View();
}

ASP .NET Core - Slider - Form Validator