118 lines
2.6 KiB
Markdown
118 lines
2.6 KiB
Markdown
# SbSlider
|
|
|
|
A range slider component for selecting numeric values within a defined range.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Value | TNumber? | null | The current value (two-way bindable) |
|
|
| ValueChanged | EventCallback\<TNumber?\> | - | Callback when value changes |
|
|
| Min | TNumber | - | Minimum value |
|
|
| Max | TNumber | - | Maximum value |
|
|
| Step | TNumber? | null | Step increment (when null, effective step is 1) |
|
|
| ShowValue | bool | true | Whether to display the current value |
|
|
| Disabled | bool | false | Whether the slider is disabled |
|
|
| Id | string? | null | Element ID for the slider thumb |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
|
|
## Supported Types
|
|
|
|
The component supports numeric struct types implementing `IComparable<T>`:
|
|
- `int`, `long`, `short`
|
|
- `float`, `double`, `decimal`
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| ValueChanged | EventCallback\<TNumber?\> | Fired when the value changes |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-slider` - Base class
|
|
- `sb-slider__track-container` - Track container for mouse events
|
|
- `sb-slider__track` - Background track
|
|
- `sb-slider__fill` - Filled portion of track
|
|
- `sb-slider__thumb` - Draggable thumb
|
|
- `sb-slider__value` - Value display
|
|
- `sb-slider--disabled` - Disabled state
|
|
|
|
## Accessibility
|
|
|
|
- Uses `role="slider"` on thumb element
|
|
- `aria-valuenow`, `aria-valuemin`, `aria-valuemax` attributes
|
|
- Keyboard: Arrow keys to adjust value, Home/End for min/max
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbSlider TNumber="int"
|
|
@bind-Value="volume"
|
|
Min="0"
|
|
Max="100" />
|
|
```
|
|
|
|
### With Step
|
|
|
|
```razor
|
|
<SbSlider TNumber="int"
|
|
@bind-Value="brightness"
|
|
Min="0"
|
|
Max="100"
|
|
Step="10" />
|
|
```
|
|
|
|
### Decimal Values
|
|
|
|
```razor
|
|
<SbSlider TNumber="decimal"
|
|
@bind-Value="rating"
|
|
Min="0m"
|
|
Max="5m"
|
|
Step="0.5m" />
|
|
```
|
|
|
|
### Without Value Display
|
|
|
|
```razor
|
|
<SbSlider TNumber="int"
|
|
@bind-Value="value"
|
|
Min="0"
|
|
Max="10"
|
|
ShowValue="false" />
|
|
```
|
|
|
|
### Custom Range
|
|
|
|
```razor
|
|
<SbSlider TNumber="int"
|
|
@bind-Value="year"
|
|
Min="2000"
|
|
Max="2030" />
|
|
```
|
|
|
|
### Disabled Slider
|
|
|
|
```razor
|
|
<SbSlider TNumber="int"
|
|
Value="75"
|
|
Min="0"
|
|
Max="100"
|
|
Disabled="true" />
|
|
```
|
|
|
|
### With Label (using SbFormField)
|
|
|
|
```razor
|
|
<SbFormField Label="Volume">
|
|
<SbSlider TNumber="int"
|
|
@bind-Value="volume"
|
|
Min="0"
|
|
Max="100" />
|
|
</SbFormField>
|
|
```
|