Adjusting Blazor Vertical Range Slider height?

1 Answer 15 Views
RangeSlider
Jstemper
Top achievements
Rank 1
Iron
Jstemper asked on 03 Jun 2021, 10:18 PM
I understand how to make the range slider fill a horizontal space using Width but is there a way to make a Vertical Range Slider fill a vertical space?

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 Jun 2021, 09:38 AM | edited on 08 Jun 2021, 10:51 AM

Hello John,

Yes, the vertical RangeSlider can be expanded to 100% height with a custom CSS class:

<div style="height:600px;background:#ffe">
    <TelerikRangeSlider @bind-StartValue="@Value"
                        @bind-EndValue="@EndValue"
                        Orientation="@SliderOrientation.Vertical"
                        SmallStep="10"
                        LargeStep="20"
                        Min="0"
                        Max="100"
                        Class="expand-slider">
    </TelerikRangeSlider>
</div>

<style>

    .k-slider-vertical.expand-slider {
        height: 100%;
    }

</style>

@code {
    public int Value { get; set; } = 30;
    public int EndValue { get; set; } = 70;
}

 

The above colored <div> is for illustration purposes only.

Note that percentage heights require the parent element to have an explicit height. If the parent has a percentage height too, the rule is applied recursively until the <html> element is reached, or until an element with a fixed height is reached. This is discussed also at:

https://docs.telerik.com/blazor-ui/common-features/dimensions

Regards, Author nickname Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
RangeSlider
Asked by
Jstemper
Top achievements
Rank 1
Iron
Answers by
Dimo
Telerik team
Share this question
or