ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/range-slider.md

id	title
range-slider	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 style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
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 style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
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 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 style={{ width:"135px"}}> Description	<div style={{width: "200px"}}> How To Access
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 style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
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 style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
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 style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
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. :::