---
title: Slider | UI
description: This is a generic component for low level layout needs. It is similar to a div in HTML.
pageTitle: Slider
pageDescription: This is a generic component for low level layout needs. It is similar to a div in HTML.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';
import { useRef, useEffect, useState } from 'react';

<Meta title="components/Forms/Slider" />

import { Slider } from './Slider';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Text,
  Center,
} from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Slider` component to your project.

```jsx
npx install @gluestack-ui add slider
```

## Import

```jsx
// import the component from your component folder
import { Slider } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<Center w={300}>
  <Slider value={50} w="50%">
    <Slider.Track>
      <Slider.FilledTrack />
    </Slider.Track>
    <Slider.Thumb />
  </Slider>
</Center>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Slider,
        Center,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The slider component consists of the following parts:

```jsx
export default () => (
 <Slider>
  <Slider.Track>
    <Slider.FilledTrack />
  </Slider.Track>
  <Slider.Thumb />
</Slider.FilledTrack>
</Slider>
);
```

## API Reference

### Box

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

<br />
<br />

## Examples

### Slider state change

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
function App(){
  const [sliderValue, setSliderValue] = React.useState(40);
  const handleChange = (value) => {
    setSliderValue(value);
  };
  return (
    <Wrapper w={300}>
        <Slider
          w="50%"
          value={sliderValue}
          onChange={(value) => {
          handleChange(value);
          }}>
          <Slider.Track>
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
        </Slider>
    </Wrapper>
  );
}
`,
      scope: { Wrapper, Slider, Center },
      argsType: {},
    }}
  />
</AppProvider>

<br />

# Advanced

## Customizing the Slider

For customizing the Slider, you have to map styled view to Slider. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import {
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
} from '../components/core/slider/styled-components';

// import the createSlider function
import { createSlider } from '@gluestack-ui/slider';

// Understanding the API
const Slider = createSlider({
  Root,
  Thumb,
  Track,
  FilledTrack,
  ThumbInteraction,
});

// Using the Slider component
export default () => (
  <Slider>
    <Slider.Track>
      <Slider.FilledTrack />
    </Slider.Track>
    <Slider.Thumb />
  </Slider>
);
```

Default styling of the component can be found in the `components/slider` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Slider/index.tsx) of the styled `Slider` component.