mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
101 lines
11 KiB
Markdown
101 lines
11 KiB
Markdown
---
|
||
id: range-slider
|
||
title: Range Slider
|
||
---
|
||
|
||
The **Range Slider** component allows users to select a value or a range of values by sliding a handle along a track. It’s perfect for adjusting numeric inputs like price, rating, or volume in an intuitive and interactive way.
|
||
|
||
## Properties
|
||
|
||
### Slider
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div> |
|
||
| :--------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
|
||
| Label | Text to display as the label for the field. | String |
|
||
| Min value | Set the minimum value for the slider. | This field accepts any numerical value. |
|
||
| Max value | Set the maximum value for the slider. | This field accepts any numerical value. |
|
||
| Default value | Set the default value when the component loads. This can be used to pre-fill the value based on your data and requirements. | This field accepts any numerical value. |
|
||
| Step size | Choose the step size for the slider. | This field accepts any numerical value. |
|
||
| Set marks | Set marking on the slider. | Accepts an array of objects with `label` and `value` as properties. |
|
||
|
||
### Range slider
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div> |
|
||
| :--------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
|
||
| Label | Text to display as the label for the field. | String |
|
||
| Min value | Set the minimum value for the slider. | This field accepts any numerical value. |
|
||
| Max value | Set the maximum value for the slider. | This field accepts any numerical value. |
|
||
| Default start value | Set the default start value when the component loads. This can be used to pre-fill the value based on your data and requirements. | This field accepts any numerical value. |
|
||
| Default end value | Set the end default value when the component loads. This can be used to pre-fill the value based on your data and requirements. | This field accepts any numerical value. |
|
||
| Step size | Choose the step size for the slider. | This field accepts any numerical value. |
|
||
| Set marks | Set marking on the slider. | Accepts an array of objects with `label` and `value` as properties. |
|
||
|
||
## Events
|
||
|
||
| Event | Description |
|
||
| :-------- | :-------------------------------------- |
|
||
| On change | Triggers whenever the value is changed. |
|
||
|
||
:::info
|
||
Check [Action Reference](/docs/actions/run-query) docs to get detailed information about all the **Actions**.
|
||
:::
|
||
|
||
## Component Specific Actions (CSA)
|
||
|
||
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
|
||
|
||
| <div style={{ width:"130px"}}> Action </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div> |
|
||
| :------------------------------------------- | :------------------------------------------------ | :-------------------------------------------------- |
|
||
| setValue( ) | Sets the value of the component. | `components.rangeslider1.setValue()` |
|
||
| setRangeValue( ) | Sets the range of the component. | `components.rangeslider1.setRangeValue()` |
|
||
| setVisibility( ) | Sets the visibility of the component. | `components.rangeslider1.setVisibility(false)` |
|
||
| setLoading( ) | Sets the loading state of the component. | `components.rangeslider1.setLoading(true)` |
|
||
| setDisable( ) | Disables the component. | `components.rangeslider1.setDisable(true)` |
|
||
| reset( ) | Resets the component to default state. | `components.rangeslider1.reset()` |
|
||
|
||
## Exposed Variables
|
||
|
||
| Variables | Description | How To Access |
|
||
| :-------- | :------------------------------------------------------------------ | :---------------------------------- |
|
||
| value | Holds the value of the slider, or an array when using range slider. | `{{components.rangeslider1.value}}` |
|
||
| label | Holds the value of the component's label. | `{{components.rangeslider1.label}}` |
|
||
|
||
## Additional Actions
|
||
|
||
| <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div> |
|
||
| :------------------------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------- |
|
||
| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Tooltip | Provides additional information on hover. Set a string value for display. | String |
|
||
|
||
## Devices
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div> |
|
||
| :--------------------------------------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------- |
|
||
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
|
||
## Styles
|
||
|
||
### Label
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div> |
|
||
| :--------------------------------------------- | :------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| Text | Sets the color of the component's label. | Select the color or click on **fx** and input code that programmatically returns a Hex color code. |
|
||
| Alignment | Sets the position of the label and input field. | Click on the toggle options or click on **fx** to input code that programmatically returns an alignment value - **side** or **top**. |
|
||
| Width | Sets the width of the input field. | Enable **Auto width** to use the standard width automatically. Disable it to manually adjust the width using the slider or by entering a numeric value via **fx**. You can also choose whether the width is calculated relative to the **Container** or relative to the **Field**. |
|
||
|
||
### Slider
|
||
|
||
| Property | Description | Configuration Options |
|
||
| :------------ | :------------------------------- | :------------------------------------------ |
|
||
| Track | Sets the color for slider track. | Select a theme or choose from color picker. |
|
||
| Accent | Sets the accent color. | Select a theme or choose from color picker. |
|
||
| Handle | Sets the handle color. | Select a theme or choose from color picker. |
|
||
| Handle border | Sets the handle border color. | Select a theme or choose from color picker. |
|
||
| Market label | Sets the marker label color. | Select a theme or choose from color picker. |
|
||
|
||
:::info
|
||
Any property having **fx** button next to its field can be **programmatically configured**.
|
||
:::
|