# 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. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6F9GfkltUu3ErR8Y%2Fslider-%E2%9C%95-fig-2.png?generation=1524497191499703\&alt=media) ## 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FWRivEO4noDDZxzaFSh1b%2FonValueChange.png?alt=media\&token=16194e2a-e9f1-46de-a680-95357fc03a3b) | This event fires as the value of the slider changes. Returns the current value of the slider. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fmdv2VWLu0P0EZFnmCfS5%2FonSlidingComplete.png?alt=media\&token=09538b49-7ab4-46e5-8bbd-05357f77070a) | This event fires when the user lifts their finger or thumb off the slider. Returns the current value of the slider. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FbZXwGRJXwEkBoPIe6YAE%2FsetMinimumValue.png?alt=media\&token=663751c2-a4a4-4d06-b4d6-f69d738892fa) | Set the slider's minimum value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FANVArvOImkaAsVr6d6Dg%2FgetMinimumValue.png?alt=media\&token=a710ae03-2354-483a-8329-e7e012fc2547) | Get the slider's minimum value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FeMmKnIQqWlHzDO3Xbd0i%2FsetMaximumValue.png?alt=media\&token=0ce85f78-3fc1-4bd0-8f28-8c89f26554d6) | Set the slider's maximum value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FDFnocd4dbEn7WCjhEgbE%2FgetMaximumValue.png?alt=media\&token=151e2ce5-dad5-467a-a0ef-cfaa8c9be2ab) | Get the slider's maximum value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FECMPMrZfwDmBMWS0dK6L%2FgetValue.png?alt=media\&token=5d61d812-4973-4074-abbb-7ea8fe9e9958) | Set the slider's initial value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGuw3iFxgD2nHtOvuOp2I%2FsetValue.png?alt=media\&token=2bf85005-a84a-43ab-b1c1-7ce74d956b4f) | Get the slider's initial value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FQIbRmDGwQEf8TizdEUj8%2FsetStep.png?alt=media\&token=4a414fed-6336-4365-9ede-561972535a1c) | Set the slider's step value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgEgXzgjSaIwlTGGi7p1f%2FgetStep.png?alt=media\&token=c37d7c80-8136-4c9c-943d-a04a35e2bc12) | Get the slider's step value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FEKvWIGbDCskcT74AWZ0c%2FsetHeight.png?alt=media\&token=6f07cea5-db24-4a7e-a615-6a723d5ec4c1) | Set the slider component's height. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FEgVsZnCozAyIgDTfbEhw%2FgetHeight.png?alt=media\&token=c6dcbf0c-6442-450b-ad34-0e05d51aa6b7) | Get the slider component's height. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FLm0nwGq6DQvoxBnGgKpt%2FgetComputedHeight.png?alt=media\&token=05ed002a-aafe-40fa-975a-4af9b4922f21) | Returns the height of the slider component in pixels after it has been rendered on-screen. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FsuJsuY6Pyxf8nII6U75V%2FsetWidth.png?alt=media\&token=617c2e2d-8eab-40a3-9ca1-59ab20c7bf18) | Set the slider component's width. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fr22HDfcMJjFRLWyRaEvP%2FgetWidth.png?alt=media\&token=a47af287-a08d-4208-9d7d-51c6473cca0f) | Get the slider component's width. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FDLp5u2hm5219tYCe7zRt%2FgetComputedWidth.png?alt=media\&token=b52455be-db3d-43a3-81b0-48a40664ddd5) | Returns the width of the slider component in pixels after it has been rendered on-screen | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Ft1fu2EItcPIwAbKGQWax%2FsetVisible.png?alt=media\&token=eb681b55-88dc-49a5-a8de-710b5579b49e) | Set whether the slider component is visible on the screen. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FaAzxOIKReELcpWg8w77V%2FgetVisible.png?alt=media\&token=5f8e2ce8-ade3-4dbe-a34c-6fa47913db7d) | Get whether the slider component is visible on the screen. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGpLR5qwJGiqKwZ6g3ubZ%2FsetX.png?alt=media\&token=9f49c704-bfba-45e8-97f0-83babeee0acd) | 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. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F9SOkCnjHx6dt1jIcrpbj%2FgetX.png?alt=media\&token=5ac791fb-ebe8-4992-9aeb-7833e6c119a4) | 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. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FLxXQT4lCjz5trwqUAMjD%2FsetY.png?alt=media\&token=dd84aee8-ef29-467f-ae62-43517bb48e69) | Set the position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FMKD2pKAQ1AwmfLMRASt5%2FgetY.png?alt=media\&token=88c885fc-abf6-4a78-b0e5-dd2f45e8a729) | Get the position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FpB6hU2MMmw50HjOh2D4v%2FsetMinimumTrackTintColor.png?alt=media\&token=58178370-6bfe-4689-b812-05d77b6a09f0) | Set the slider's minimum track tint color i.e. the color of the track the slider when set to its lowest value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FUfV6qqrTPaenBQZ1Wsr7%2FgetMinimumTrackTintColor.png?alt=media\&token=10e09998-79fb-49ac-8bab-e06859ec187b) | Get the slider's minimum track tint color | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F3LtN1eOI2vc9M8SGpLPW%2FsetMaximumTrackTintColor.png?alt=media\&token=e3a29fad-2fd2-47d2-80a2-5bacb584a6d2) | Set the slider's minimum track tint color i.e. the color of the track the slider when set to its highest value. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FDMFcZBZ5sT0aIpcQRWr8%2FgetMaximumTrackTintColor.png?alt=media\&token=77bb6c2e-a5ba-452e-881f-3dfe9220a176) | Get the slider's maximum track tint color | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjuwjU1Rbku0pN90d1Atz%2FsetDisabled.png?alt=media\&token=1c3705b9-f1a4-4679-9136-a1d6cfff3590) | Set the slider's disabled value (true/false). | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgrHXkfRMoXKT6IlB4Rfh%2FgetDisabled.png?alt=media\&token=e5e61d65-f8b8-4e08-87f2-97319d8bdca5) | Get the slider's disabled value (true/false). | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FRIooeiXmZD4hy1XL3uRO%2FsetThumbTintColor.png?alt=media\&token=5570c836-6166-4ff0-a4a9-051e9494e438) | Set the slider's thumb tint color i.e. the color of the thumb at any given position. | | ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FcqPfdFerSfzA7qH8Oo3m%2FgetThumbTintColor.png?alt=media\&token=68868928-655f-4861-9a9d-4cb721c1accd) | Get the slider's thumb tint color. |