# Slider

Component: Sliders allow users to make selections from a range of values as either a single value, or dual value in a high/low situation. Inner element spacing is used for dynamic resizing along with a background surface.

[Styleguide Link](https://zpl.io/brGNo51)

* Parent: Form (Container)
* Child: [Slider - Ctrl](https://able.bucca.com/core/overview/slider), [Label](https://able.bucca.com/core/overview/label), [FC - Leading](https://able.bucca.com/core/components/form/fc-leading), [FC - Trailing](https://able.bucca.com/core/components/form/fc-trailing)

## Properties

### Label

The component can be presented with a label to give context to the form control. This label can be positioned above (top), left, or not at all (none). NOTE: Label left for a slider is represented as an icon which has a fixed width, we do not use text content that would have variable lengths, as that would alter the slider lengths randomly.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F21rdzyvchw9h96205sKJ%2FLabel.png?alt=media&#x26;token=6fd15cb8-8601-42e9-81e6-e42f0b6effc5" alt=""><figcaption></figcaption></figure>

### Helper Text

To provide additional context for the component a sentence can be added to the component for examples, how the input will be used, or as further clarification to the label.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FD0OK4DbaO4SBpQ8XzDf7%2FHelper.png?alt=media&#x26;token=c5038787-b91a-41f3-9449-1b32d6a3a43d" alt=""><figcaption></figcaption></figure>

**Note:** The structure and spacing of this component is the same between Textfield, Textarea, Selectlist, Chiplist, Slider, Userlist, and Toggle Button.

**Note:** Each of the nested elements and primitives of this form component have properties that can be adjusted to customize the component.