# 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. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.thunkable.com/app-design/ui-components/input-components/slider.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.