React Slider

https://github.com/zillow/react-slider
Admin
Accessible, CSS agnostic, slider component for React.
Tokens:2,691
Snippets:25
Trust Score:9.2
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Runs a local development server, typically hosting a style guide or demo application, accessible via a specified URL (e.g., http://localhost:6060).

```Shell
npm start
```

--------------------------------

### Install react-slider using npm

Source: https://github.com/zillow/react-slider/blob/master/README.md

Installs the core react-slider package using the npm package manager.

```sh
npm install react-slider
```

--------------------------------

### Install Dependencies - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Installs all necessary project dependencies listed in package.json for development.

```Shell
npm install
```

--------------------------------

### Deploy Documentation - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Deploys the project's living style guide documentation, typically to a hosting service like GitHub Pages.

```Shell
npm run deploy
```

--------------------------------

### Install TypeScript types for react-slider

Source: https://github.com/zillow/react-slider/blob/master/README.md

Installs the TypeScript definition files for react-slider as a development dependency using npm.

```sh
npm install --save-dev @types/react-slider
```

--------------------------------

### Custom Styled React Slider with styled-components in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Provides an example of styling the ReactSlider components (slider container, thumb, track) using the styled-components library. It defines styled components and uses the 'renderThumb' and 'renderTrack' props to apply them.

```jsx
import styled from 'styled-components';

const StyledSlider = styled(ReactSlider)`
    width: 100%;
    height: 25px;
`;

const StyledThumb = styled.div`
    height: 25px;
    line-height: 25px;
    width: 25px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    cursor: grab;
`;

const Thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}</StyledThumb>;

const StyledTrack = styled.div`
    top: 0;
    bottom: 0;
    background: ${props => (props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd')};
    border-radius: 999px;
`;

const Track = (props, state) => <StyledTrack {...props} index={state.index} />;

<StyledSlider defaultValue={[50, 75]} renderTrack={Track} renderThumb={Thumb} />;
```

--------------------------------

### Single React Slider with ariaLabelledby

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Demonstrates how to create a single React Slider and associate it with a label element using the `ariaLabelledby` prop for improved accessibility.

```jsx
<div>
    <label id="slider-label">React Slider example</label>
    <ReactSlider
        ariaLabelledby="slider-label"
        className="horizontal-slider"
        thumbClassName="example-thumb"
        trackClassName="example-track"
        renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
    />
</div>
```

--------------------------------

### Run Tests on File Change - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Starts the test runner in watch mode, automatically re-running tests whenever relevant files are changed.

```Shell
npm run test:watch
```

--------------------------------

### Basic Single React Slider in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Demonstrates a basic single thumb slider configuration using the ReactSlider component, similar to a standard HTML range input. It includes basic class names for styling and renders the current value inside the thumb.

```jsx
<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
/>
```

--------------------------------

### Multi Thumb React Slider in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Illustrates a slider with multiple thumbs (more than two), initialized with an array of values using 'defaultValue'. Configures thumb behavior with 'pearling' and 'minDistance'.

```jsx
<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 50, 100]}
    ariaLabel={['Leftmost thumb', 'Middle thumb', 'Rightmost thumb']}
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
    pearling
    minDistance={10}
/>
```

--------------------------------

### React Slider Event Handlers in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Demonstrates how to use the 'onBeforeChange', 'onChange', and 'onAfterChange' props to capture slider value changes at different stages of interaction (before drag, during drag, after drag ends).

```jsx
<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    onBeforeChange={(value, index) =>
        console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)
    }
    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
    onAfterChange={(value, index) =>
        console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)
    }
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
/>
```

--------------------------------

### Custom Styling and Render Functions for React Slider

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Defines styled-components for the slider track, thumb, and container, along with functional components to render the custom thumb and track elements within the React Slider.

```jsx
    width: 100%;
    height: 25px;
`;

const StyledThumb = styled.div`
    height: 25px;
    line-height: 25px;
    width: 25px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    cursor: grab;
`;

const Thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}</StyledThumb>;

const StyledTrack = styled.div`
    top: 0;
    bottom: 0;
    background: ${props => (props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd')};
    border-radius: 999px;
`;

const Track = (props, state) => <StyledTrack {...props} index={state.index} />;

const StyledContainer = styled.div`
    resize: horizontal;
    overflow: auto;
    width: 50%;
    max-width: 100%;
    padding-right: 8px;
`;

const ResizableSlider = () => (
    <StyledContainer>
        <StyledSlider defaultValue={[50, 75]} renderTrack={Track} renderThumb={Thumb} />
    </StyledContainer>
);

<ResizableSlider />;
```

--------------------------------

### Vertical React Slider in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Configures a multi-thumb slider to render vertically using the 'orientation' prop set to 'vertical'. Also applies the 'invert' prop and includes 'pearling' and 'minDistance'.

```jsx
<ReactSlider
    className="vertical-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 50, 100]}
    ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
    orientation="vertical"
    invert
    pearling
    minDistance={10}
/>
```

--------------------------------

### React Slider with Marks in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Shows how to add default marks to the slider track using the 'marks' prop. Marks are automatically generated based on the min and max values. Includes basic styling classes for the slider, thumb, track, and marks.

```jsx
<ReactSlider
    className="horizontal-slider"
    marks
    markClassName="example-mark"
    min={0}
    max={9}
    thumbClassName="example-thumb"
    trackClassName="example-track"
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
/>
```

--------------------------------

### Double React Slider with ariaLabelledby Array and ariaValuetext

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Shows how to create a double React Slider, associating each thumb with a separate label using an array for `ariaLabelledby`. Also includes `ariaValuetext` for providing a human-readable value description and configuration like `pearling` and `minDistance`.

```jsx
<div>
    <label id="first-slider-label">Start slider label</label>
    <label id="second-slider-label">End slider label</label>
    <ReactSlider
        className="horizontal-slider"
        thumbClassName="example-thumb"
        trackClassName="example-track"
        defaultValue={[0, 100]}
        ariaLabelledby={['first-slider-label', 'second-slider-label']}
        ariaValuetext={state => `Thumb value ${state.valueNow}`}
        renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
        pearling
        minDistance={10}
    />
</div>
```

--------------------------------

### Inverted React Slider with Custom Marks in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Configures a slider to be inverted and display custom marks specified by an array of values using the 'marks' prop. Demonstrates the 'invert' prop and custom mark placement.

```jsx
<ReactSlider
    className="horizontal-slider"
    marks={[5, 6, 7, 8, 9]}
    markClassName="example-mark"
    min={0}
    max={9}
    invert
    thumbClassName="example-thumb"
    trackClassName="example-track"
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
/>
```

--------------------------------

### Vertical React Slider with Interval Marks in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Shows a vertical multi-thumb slider with marks generated automatically at a specified interval (25) by providing a number value to the 'marks' prop. Includes vertical orientation and other standard props.

```jsx
<ReactSlider
    className="vertical-slider"
    markClassName="example-mark"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 50, 100]}
    marks={25}
    ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
    orientation="vertical"
    invert
    pearling
    minDistance={10}
/>
```

--------------------------------

### Double Thumb React Slider in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Creates a slider with two thumbs, setting their initial positions using 'defaultValue'. Includes accessibility props like 'ariaLabel' and 'ariaValuetext' and uses 'pearling' and 'minDistance' for thumb behavior.

```jsx
<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 100]}
    ariaLabel={['Lower thumb', 'Upper thumb']}
    ariaValuetext={state => `Thumb value ${state.valueNow}`}
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
    pearling
    minDistance={10}
/>
```

--------------------------------

### Controlled React Slider Component in JSX

Source: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.md

Shows how to manage the slider's state externally using React's useState hook and the 'value' and 'onChange' props, making it a controlled component. This allows external logic to dictate the slider's position.

```jsx
const [value, setValue] = React.useState([25, 50]);

<ReactSlider
    value={value}
    onBeforeChange={(value, index) =>
        console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)
    }
    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
    onAfterChange={(value, index) =>
        console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)
    }
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
/>;
```

--------------------------------

### Build Project - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Compiles and bundles the component for distribution (e.g., publishing to npm) and also builds the demo application.

```Shell
npm run build
```

--------------------------------

### Prepare for Release - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Automates release tasks such as updating the change log and bumping the package version. Note that this command does not publish to npm.

```Shell
npm run release
```

--------------------------------

### Run Tests Once - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Executes the project's test suite a single time.

```Shell
npm test
```

--------------------------------

### Clean Built Resources - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Deletes previously built files and directories to ensure a clean build.

```Shell
npm run clean
```

--------------------------------

### Run Tests with Coverage - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Runs the project tests and generates a code coverage report, usually placed in a 'coverage/' directory.

```Shell
npm run test:coverage
```

--------------------------------

### Update Test Snapshots - React Slider - Shell

Source: https://github.com/zillow/react-slider/blob/master/CONTRIBUTING.md

Updates any outdated test snapshots used in snapshot testing.

```Shell
npm run test:update
```
Tokens:
Raw