New to Telerik UI for ASP.NET Core? Download free 30-day trial

Razor Page

This article describes how to configure the Telerik UI Slider for ASP.NET Core in a RazorPages scenario.

See the Slider configuration in the example below, and for the full project with RazorPages examples, visit our GitHub repository.

@page
@model Telerik.Examples.RazorPages.Pages.Slider.SliderIndexModel
@{
    ViewData["Title"] = "SliderIndex";
}

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

<h1>SliderIndex</h1>

<h4>Horizontal orientation:</h4>
<div class="slider-container">
@(Html.Kendo().Slider()
    .Name("slider")
    .IncreaseButtonTitle("Right")
    .DecreaseButtonTitle("Left")
    .Min(-10)
    .Max(10)
    .SmallStep(2)
    .LargeStep(5)
    .Value(0)
    .HtmlAttributes(new { @class = "balSlider", title = "slider" })
)
</div>
<h4>Vertical orientation:</h4>
<div class="slider-container">
@(Html.Kendo().Slider()
    .Name("eqSlider1")
    .Orientation(SliderOrientation.Vertical)
    .Min(-20)
    .Max(20)
    .SmallStep(1)
    .LargeStep(20)
    .ShowButtons(false)
    .Value(10)
    .HtmlAttributes(new { @class = "eqSlider", title = "eqSlider1" })
)
</div>

<style>
    .slider-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    div.balSlider {
        width: 100%;
    }
    div.balSlider .k-slider-selection {
        display: none;
    }
    div.eqSlider {
        display: inline-block;
        margin: 1em;
        height: 122px;
        vertical-align: top;
    }
</style>
    @page
    @model Telerik.Examples.RazorPages.Pages.Slider.SliderIndexModel
    @{
        ViewData["Title"] = "SliderIndex";
    }

    @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
    @Html.AntiForgeryToken()

    <h1>SliderIndex</h1>

    <h4>Horizontal orientation:</h4>
    <div class="slider-container">
        <kendo-slider name="Slider"
            increase-button-title="Right"
            decrease-button-title="Left"
            min="-10" max="10"
            small-step="2"
            large-step="5"
            value="0" class="balSlider" title="slider">
        </kendo-slider>
        </div>
    <h4>Vertical orientation:</h4>
    <div class="slider-container">
        <kendo-slider name="eqSlider1"
            orientation="SliderOrientation.Vertical"
            increase-button-title="Right"
            decrease-button-title="Left"
            min="-20" max="20"
            small-step="1"
            large-step="20"
            show-buttons="false"
            value="10" class="eqSlider" title="slider">
        </kendo-slider>
    </div>

    <style>
        .slider-container {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        div.balSlider {
            width: 100%;
        }
        div.balSlider .k-slider-selection {
            display: none;
        }
        div.eqSlider {
            display: inline-block;
            margin: 1em;
            height: 122px;
            vertical-align: top;
        }
    </style>
    public void OnGet()
    {

    }

See Also

In this article