Blazor RangeSlider概述
的Blazor范围滑块组件允许用户通过沿着轨道拖动其手柄来选择一个值范围。它提供了模板、各种配置选项、验证和键盘导航。
RangeSlider组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建RangeSlider
使用
TelerikRangeSlider标记，将组件添加到razor页面。提供
StartValue而且EndValue(单向数据绑定)或bind-StartValuebind-EndValue(双向数据绑定)。选择
最小值，马克斯，SmallStep而且LargeStep设置以定义滑块的外观和行为。
使用双向数据绑定的Telerik RangeSlider的基本设置
@*用户可以选择步长为5的十进制值范围，每20将有一个大刻度。标签模板也用于添加货币符号*@用户想要产品之间的@MinPrice. tostring ("C2")和@ maxprice . tostring ("C2")
< TelerikRangeSlider @bind- startvalue ="@MinPrice" @bind- endvalue ="@ maxprice " Min="@ lowestprice " Max="@ highestprice " SmallStep="5m" LargeStep="20m" Width="550px"> @context. tostring ("C2") @code{十进制MinPrice {get;设置;} = 20m;十进制MaxPrice {get;设置;} = 75m;十进制最低价格{get;设置;} = 10m; decimal HighestPrice { get; set; } = 150m; }组件引用
类类型的泛型组件RangeSliderStartValue的类型相同，可以是数值类型EndValue．
@code {TelerikRangeSlider TheRangeSlider {get;设置;}十进制MinPrice {get;设置;} = 20m;十进制MaxPrice {get;设置;} = 75m;十进制最低价格{get;设置; } = 10m; decimal HighestPrice { get; set; } = 150m; } 步骤
RangeSlider适用于小步骤和大步骤，它们都是必需的。有关其配置的详细信息，请参阅步骤的文章．
蜱虫的位置
RangeSlider让你选择在哪里渲染它的刻度。你可以通过TickPosition参数。它需要一个元素Telerik.Blazor.SliderTickPosition枚举。可以之前，后，这两个(默认),没有一个．例如，使用默认的水平滑块，这些值将呈现上面、下面、上面和下面的刻度，以及没有刻度。
取向
你可以自定义RangeSlider的默认水平方向取向参数。取Telerik.Blazor.SliderOrientation包含水平(默认值)和垂直选项。
小数
此设置有助于避免舍入误差计算步骤时(请参阅有关此类型错误的更多信息)在这里)．探索小数的文章详细信息请参见如何配置该选项。
验证
你可以使用内置的验证来验证RangeSlider的值。看到输入验证文章获取更多详细信息。
参数
RangeSlider提供了各种参数，允许你配置组件:
| 参数 | 类型 | 描述 |
|---|---|---|
小数 |
int |
指定步骤的数字精度。 |
启用 |
保龄球 |
组件是否启用。 |
LabelTemplate |
RenderFragment < TValue > |
让您为主要刻度呈现自己的自定义标签。 |
LargeStep |
TValue |
定义较大(较长)刻度所在的位置-它们在元素的每n次出现时呈现LargeStep．必需的。 |
马克斯 |
TValue |
滑块上的最大值。必需的。 |
最小值 |
TValue |
滑块上的最小值。必需的。一定要低于马克斯． |
SmallStep |
TValue |
定义滑块所经过的步骤价值当用户拖动手柄时更改。还定义轨道上出现小刻度的位置，以指示可以选择的值。必需的。 |
取向 |
SliderOrientation（ 水平） |
滑动条是水平的(默认)还是垂直的。 |
TickPosition |
SliderTickPosition（ 这两个） |
控制刻度的位置。 |
StartValue而且EndValue；而且bind-StartValue而且bind-EndValue |
TValue |
标记范围的滑块的较低和较高的值。可以是数值类型(例如int，小数，双等等)。当用户移动滑块的拖动手柄时，它会随着SmallStep，但您可以通过编程方式设置一个值，将句柄放置在刻度之间和这些步骤之间。 |
造型和外观
以下参数使您能够自定义Blazor滑块的外观:
| 参数 | 类型 | 描述 |
|---|---|---|
类 |
字符串 |
CSS类，它将被呈现在滑块的主包装元素上。 |
宽度 |
stirng |
主元素的宽度。如果你想让它适合一个容器，你可以设置它为100％或其他百分比值，取决于应用程序的需要。你可以在维篇文章。 |