> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/slider/code/subcomponents.md).

# Subcomponents

## Control

The control subcomponent is required to render the `Control` of the TextInput component. Because of this, this component extends the native `ranged input` component props.  Because of this, you can use all of the native props. This is a required children.

{% hint style="danger" %}
Notice that there is a difference between using `hasError, isDisabled` here or in the parent component. It is not recommended to change this props in the `Control` subcomponent, because this props can be inherited from the Wrapper, in fact, **you should never use it**`.` If you use it in the `Control` subcomponent, you will get the state only in the field. 
{% endhint %}

### API

| Props             | Type                                                | Required |
| ----------------- | --------------------------------------------------- | -------- |
| `rangeVisibility` | `boolean`                                           | :x:      |
| `minValue`        | `number`                                            | :x:      |
| `maxValue`        | `number`                                            | :x:      |
| `hasInput`        | `boolean`                                           | :x:      |
| `value`           | `number`                                            | :x:      |
| `isDisabled`      | `boolean`                                           | :x:      |
| `hasError`        | `boolean`                                           | :x:      |
| `step`            | `number`                                            | :x:      |
| `onChange`        | `(e: React.ChangeEvent<HTMLInputElement>) => void;` | :x:      |

<details>

<summary>rangeVisibility</summary>

Set to true if you want the slider to show the range

</details>

<details>

<summary>minValue and maxValue</summary>

Maximum or minimum value of the slider

</details>

<details>

<summary>hasInput</summary>

Set to true if you want to have an numeric input that affects the value.

</details>

<details>

<summary>step</summary>

Steps on which the input changes the values

</details>

## Helptext

The helptext subcomponent renders the children passed below the field as a ReactNode. This is made like this so you can have full control over the component.

#### Helptext API

The control subcomponent is required to render the `HelpText` of the TextInput component. Because of this, this component extends the native `span` component props.&#x20;

|          |           |   |
| -------- | --------- | - |
| children | ReactNode | ✅ |

## Label

The Label subcomponent extends the SDS label component. See for reference: [Label](broken://pages/TwCP2I3z2hP5oGNIUov2)