Slider Showcase
Example
Example width (width: 20, val: 3)
Example 3
Example 4
Example Nullable
Component Documentation
Component Name
Slider
Builder Function Name
create_slider_manager
Description
Displays a styled slider for numeric input, supporting single or multiple thumbs, highlighting ranges, and optional 'Set Null'.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | number or number[] | 0 | Current value(s). If an array is provided, multiple thumbs appear. |
| min | number | 0 | Minimum value range. |
| max | number | 2 | Maximum value range. |
| step | number | 0.01 | Value increment steps. |
| on_change | function | Called with new value(s) when changed (pointer move or arrow key). | |
| on_down | function | Called with new value when pointer is pressed. | |
| on_up | function | Called with final value(s) when pointer is released. | |
| label | string or null | Label text displayed above the slider. | |
| name | string | slider | Name attribute for potential form usage. |
| label_font_size | number | 1.2 | Size in rem for label text. |
| is_required | boolean | false | Whether the field is required for form submission. |
| is_read_only | boolean | false | If true, the slider can't be changed. |
| font_size | number | 1 | Base text size for the slider thumb. |
| is_disabled | boolean | false | If true, slider is disabled. If val is null and is_nullable is false, defaults to true. |
| is_nullable | boolean | false | If true, a 'Set Null' / 'Select Value' button toggles val between null and min. |
| color | CSS color | var(--primary-t) | Color used for highlight track background and thumb details. |
| is_short | boolean | false | If true, uses a more compact thumb design. |
| is_show_text | boolean | true | If false, hides numeric text on thumb. |
| ml | number | 0 | Margin-left in rem. |
| mr | number | 0 | Margin-right in rem. |
| mt | number | 0 | Margin-top in rem. |
| mb | number | 0 | Margin-bottom in rem. |
| highlight_range_start_percent | number | 0 | Optional highlight range start in percent (0-100). |
| highlight_range_end_percent | number | 0 | Optional highlight range end in percent (0-100). |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Sets initial min, max, step, etc. Called once with the config. Also sets up thumbs from val. | No Params | |
| set_val | Programmatically updates the slider's val (and thumbs). | No Params | |
| handle_pointer_down | Begins tracking pointer for a slider thumb drag. | No Params | |
| handle_pointer_move | Moves the closest thumb to the pointer's position. | No Params | |
| handle_pointer_up | Finishes the drag, calls on_up with final value(s). | No Params | |
| handle_thumb_keydown | Moves the thumb left/right by step when arrow keys pressed. | No Params | |
| set_loading_i | Sets the thumb index to display loading state. | No Params | |
| set_error_i | Sets the thumb index to display error state. | No Params | |
| set_min | Updates the slider's min bound. | No Params | |
| set_max | Updates the slider's max bound. | No Params | |
| set_step | Updates the slider's step value. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | number or number[] | Current value(s) after pointer move/arrow key changes. |
| working_val | array | Internal slider thumb(s) values. |
| loading_i | number or null | Thumb index that is loading, if any. Setting triggers loading state for that thumb. |
| error_i | number or null | Thumb index that has an error, if any. |
| toggle_null_button_manager | object | Button manager for toggling null if is_nullable is true. |
