# Slider ## Slider Overview The Slider is a great UI element to enable users easily select a value from a fixed range of values. ![](https://689802330-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) {% embed url="" %} ## Getting Started To set up a slider, you'll have to first define the `minimum` and `maximum` values, the initial `value` and the incremental `steps` of the slider We recommend using a Label with the Slider so that users can get immediate feedback on the value being set. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWieB_6PKtBqgP5i117%2F-MWieGLSNS_QHCC6mR5w%2Fslider_change.png?alt=media\&token=c05db409-594b-4b50-9e8c-f5791bda821d) | Property | Description | | ------------- | --------------------------------------------------------- | | Minimum Value | Default (`0`); Minimum and leftmost value of the Slider | | Maximum Value | Default (`100`); Maximum and rightmost value of the Slide | | Value | Default (`0`); Initial value of the Slider | | Step | Default (`0`); Increments of the Slider | ## Style the Slider * **Minimum Track Tint Color:** Color of the slider track to the left of the thumb * **Maximum Track Tint Color:** Color of the slider track to the right of the thumb * **Thumb Tint Color (Android only):** Color of the thumb * **Border:** * **Width:** Enter how wide you want the border outline of the Slider to be * **Color:** Pick a color for the border of the Slider * **Style:** Select if you want the border to be a dotted, dashed or solid line * **Radius:** Enter how round you want the edges of the border for the Slider to be | Property | Description | | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Minimum Track Tint Color | Default (`none`); Color of the slider track to the left of the thumb | | Maximum Track Tint Color | Default (`none`); Color of the slider track to the right of the thumb | | Thumb Tint Color (Android only) | Default (`none`); Color of the thumb | | Border | Default (`none`); You can add a border with customized `width`, `color`, `style (solid, dotted, dashed)`and `borderRadius` | ### Edit the Slider size You can set how tall the Slider is using the height property and set how wide it is using the width property. **Height** * **Fill container -** The Slider fills the entire screen vertically * **Fit contents -** The Slider’s height changes to fit the contents it contains * **Relative size -** The Slider fills the specified percentage of the screen * **Absolute size -** Sizes the Slider to a specified number of pixels **Width** * **Fill container -** The Slider fills the entire screen horizontally * **Fit contents -** The Slider’s width changes to fit the contents it contains * **Relative size -** The Slider fills the specified percentage of the screen * **Absolute -** Sizes the Slider to a specified number of pixels ## Add spacing You change the spacing and positioning of the Slider with the Margin and Padding properties. **Margin** * You can specify how much space you want between the border and the contents of Slider using either pixel or percent values. **Padding** * You can specify how much space you want between the edges of the Slider and the screen using either pixel or percent values. ## Events ### On Sliding Complete ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd07fK0bKNLGGd9w3C%2Fon_sliding_complete.png?alt=media\&token=4cc501d3-a647-4a8e-a034-5ec8cf678931) When the user takes their finger off the slider. The event returns the value that the slider has settled on. Please note that the `on Sliding Complete` event does not work in web preview ### On Value Change ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0EmSukjevp1vmiuW%2Fon_value_change.png?alt=media\&token=2adbcbf4-9e1b-40d1-93b7-8293dfb8e8ec) This event fires each time the slider moves to a new position. Each time a new values is selected this event will return an updated value. ## Properties ### Disabled ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0TAQ0GUPiRvuBVkr%2Fdisabled.png?alt=media\&token=30e20758-30e8-4f50-9c0b-bb7ba12ac2a7) ### Height ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0UnL2oZ1JAjzOjCh%2Fheight.png?alt=media\&token=bdc1401e-d074-4e9e-bcb2-d4150bb8bdcb) The set and get height blocks work with the Height property of the slider component. Acceptable input values are. * Number of Pixels * Percentage Height * "Fit Contents" * "Fill Container" The `Computed Height`block returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels. ### Maximum Track Tint Color ### ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0XTzYjZvbiw53C59%2Fmax_track_tint_color.png?alt=media\&token=bb4b132e-0241-45a8-a9c0-89298ba7681b) Set or get the color of the right side of the slider. ### Maximum Value ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0gUxWrrGu1lDl9do%2Fmax_value.png?alt=media\&token=c7fdaeed-3a35-468a-9830-b73ba0756d8e) Set or get the biggest value of the slider ### Minimum Track Tint Color ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0aeplPgPBoo9l7TP%2Fmin_track_tint_color.png?alt=media\&token=cab3faa4-b39e-4d02-8253-00fcc76b9fba) Set or get the color of the left side of the slider ### Minimum Value ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0k0qXbx4ESTb0kXR%2Fmin_value.png?alt=media\&token=1e931645-7f99-4244-92f8-7d1964acf81d) Set or get the smallest value of the slider ### Step ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd0yuKapDGLzz_T3PV%2Fstep.png?alt=media\&token=fa3ed5f9-b959-488a-93f8-b59d21e4d4b1) Set or get the step-size, also known as the increment, of the slider. ### Thumb Tint Color ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd1-F1jM14RlUMTiqt%2Fthumb_tint_color.png?alt=media\&token=08623e0b-f39d-4bdb-be1a-52ba0ec8437f) Change the color of the slider itself. ### Value ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd10RT2xkPovAV8nqN%2Fvalue.png?alt=media\&token=42b6ff4a-645f-40fe-86ea-90dfdaddb1c6) The set and get value blocks are user to work with the position of the slider. ### Visible ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd11YtZ8IiMBVNIKGC%2Fvisible.png?alt=media\&token=e6e3a380-c82e-4fb5-8955-eeee3ec7c226) The set and get visible blocks are used to show or hide the entire Slider component. Acceptable values are: * True * False ### Width ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd-u-u9WcviiJs9ALB%2F-MWd12g5FiKwJWepDpDw%2Fwidth.png?alt=media\&token=8164819e-abe6-4082-a1b9-4867533dab04) The set and get width blocks work with the Width property of the Slider component. Acceptable input values are. * Number of Pixels * Percentage Height * "Fit Contents" * "Fill Container" The `Computed Width`block returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.