Blazor RangeSlider概述
的Blazor Range Slider组件允许用户通过沿着轨道拖动它的手柄来选择一个值范围。它提供了模板、各种配置选项、验证和键盘导航。
RangeSlider组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。
创建RangeSlider
使用
TelerikRangeSlider标记将组件添加到剃须刀页面。提供
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 {decimal MinPrice {get;设置;} = 20m;十进制MaxPrice {get;设置;} = 75m;小数LowestPrice {get;设置;} = 10m; decimal HighestPrice { get; set; } = 150m; }组件引用
RangeSlider是一个泛型组件，它接受StartValue的类型可以是数值类型，并且与EndValue．
@code {TelerikRangeSlider TheRangeSlider {get;设置;} decimal MinPrice {get;设置;} = 20m;十进制MaxPrice {get;设置;} = 75m;小数LowestPrice {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％或其他百分比值，这取决于应用程序的需要。你可以在维篇文章。 |