> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/app-design/ui-components/input-components/slider.md). # Slider Component ## Overview The slider component is a horizontal track with a control, called a thumb, that app users can adjust between a minimum and maximum value. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color. ![](/files/-LAn6F9GfkltUu3ErR8Y) ## Properties ### Slider | Property | Value | Description | | ------------------- | ---------- | --------------------------------------------------------------------------------------- | | Value | Number | Initial value of the slider | | Step | Number | Step between values on the slider | | Minimum Value Range | Number | Minimum value the user can select. Must be less than Maximum Value. | | Maximum Value Range | Number | Maximum value the user can select. Must be greater than Minimum Value. | | Min Track | Color | Color of slider track between minimum value and current value | | Max Track | Color | Color of slider track between current value and maximum value | | Thumb Color | Color | Color of the slider thumb widget | | Disabled | True/False | A disabled component is temporarily inactive and cannot be interacted with by the user. | ### Layout | Property | Value | Desciption | | ----------- | ---------------- | -------------------------------------------------------------------------------------------------------- | | X | coordinate value | Position of the upper left corner of the slider on the X-axis, where the left side of the screen is X=0. | | Y | coordinate value | Position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0. | | Height | number in pixels | The slider's height is defined by a custom number of pixels. | | Width | number in pixels | The slider's width is defined by a custom number of pixels. | | Resize Mode | Stretch | Stretches the slider to fit the dimensions of the device's screen. | | Resize Mode | Float in Place | Renders the slider in the same aspect ratio as the design, regardless of the device size. | ### **Style** | Property | Value | Description | | --------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------- | | Visible | visible | Users can see the slider. | | Visible | invisible | Users cannot see the slider. | | Border: Color | color | The slider's border is the color selected. | | Border: Width | number in pixels | The width of the slider's border is defined by a custom number of pixels. | | Border: Radius | number in pixels | The radius of the slider border’s corners is defined by a custom number of pixels. | | Shadow: Color | color | The slider's shadow is the color selected. | | Shadow: Opacity | number between 0 and 100 | The opacity of the slider's shadow. | | Shadow: Radius | number in pixels | The radius of the slider shadow’s corners is defined by a custom number of pixels. | | Shadow: Offset | number in pixels | How far the slider's shadow should be offset, in height and width, is defined by a custom number of pixels. | ## Blocks To access the blocks specific to the slider component: 1. On the Design tab, add a **Slider** component to a screen. 2. Navigate to the **Blocks** tab. 3. In the component tree on the left, click the name of the slider component. 4. A drawer of slider-specific blocks opens. | Block Image | Description | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | ![](/files/vQnirOL0QyikrSe68qDv) | This event fires as the value of the slider changes. Returns the current value of the slider. | | ![](/files/3af9vBQpazA6e8wc1tGe) | This event fires when the user lifts their finger or thumb off the slider. Returns the current value of the slider. | | ![](/files/dTFPAye3WfHqNTf6QEDX) | Set the slider's minimum value. | | ![](/files/hUdNwNsEk52j2aCIsMWv) | Get the slider's minimum value. | | ![](/files/NpSgFOsWqk7DdSjvo2Dy) | Set the slider's maximum value. | | ![](/files/Tpjvr3TUarHRvWk4nPOW) | Get the slider's maximum value. | | ![](/files/1m2IHJE3VDFXkCYSESGG) | Set the slider's initial value. | | ![](/files/bazIQPXotVeUueCVUfuZ) | Get the slider's initial value. | | ![](/files/VTzIBGEevcMztcvCS0qM) | Set the slider's step value. | | ![](/files/8n9JKzZaaio9swRlRDKF) | Get the slider's step value. | | ![](/files/CvNrkNRixPIUcAongi0j) | Set the slider component's height. | | ![](/files/qmKc3ElpFg8fRzOoq97G) | Get the slider component's height. | | ![](/files/8BmfNoHbgsx3M5CJy2ou) | Returns the height of the slider component in pixels after it has been rendered on-screen. | | ![](/files/QNBGgpPgVeo31LA5wdI9) | Set the slider component's width. | | ![](/files/IPBxas57hnC8myO8tiVP) | Get the slider component's width. | | ![](/files/BezavwCTlJxtZDPy50FX) | Returns the width of the slider component in pixels after it has been rendered on-screen | | ![](/files/WsEZTyWQGpNfpXwYqFO4) | Set whether the slider component is visible on the screen. | | ![](/files/3HcBdaN85BjlODOeJAFq) | Get whether the slider component is visible on the screen. | | ![](/files/kzyvU0foHCNqZlF4fBiS) | Set the position of the upper left corner of the slider on the X-axis, where the left side of the screen is X=0. | | ![](/files/0lPeFaTSjRkKyR9HhrN9) | Get the position of the upper left corner of the slider on the X-axis, where the left side of the screen is X=0. | | ![](/files/FUE59tdbNxSBWvTkQUq8) | Set the position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0. | | ![](/files/AmkClVI8UKNSeqiO4Yt7) | Get the position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0. | | ![](/files/aUR2GLE9YS7Aba5JvvTU) | Set the slider's minimum track tint color i.e. the color of the track the slider when set to its lowest value. | | ![](/files/XIYf3pptPwcnw0BRLkr9) | Get the slider's minimum track tint color | | ![](/files/L5dp7zzH06CkzeeVSiZ5) | Set the slider's minimum track tint color i.e. the color of the track the slider when set to its highest value. | | ![](/files/NW7CbsuIpVZW9YUmburg) | Get the slider's maximum track tint color | | ![](/files/Ybj1ThE2FDzOjoh63n4e) | Set the slider's disabled value (true/false). | | ![](/files/vmfo0aVKB5qwTbh7UVkU) | Get the slider's disabled value (true/false). | | ![](/files/w2oQN07tEzWjkUrENg06) | Set the slider's thumb tint color i.e. the color of the thumb at any given position. | | ![](/files/AY5LNHPrOXL2tfWXQ7eT) | Get the slider's thumb tint color. |