https://github.com/strvcom/react-sliders

CSS agnostic React Sliders
https://github.com/strvcom/react-sliders

css-agnostic headless hooks react sliders

Last synced: 10 months ago
JSON representation

CSS agnostic React Sliders

• Host: GitHub
• URL: https://github.com/strvcom/react-sliders
• Owner: strvcom
• License: mit
• Created: 2020-07-09T08:34:11.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T20:17:23.000Z (over 3 years ago)
• Last Synced: 2025-03-18T06:29:43.644Z (over 1 year ago)
• Topics: css-agnostic, headless, hooks, react, sliders
• Language: TypeScript
• Homepage:
• Size: 2.75 MB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 65
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# `@strv/react-sliders`

![Continuous Integration](https://github.com/strvcom/react-sliders/workflows/Continuous%20Integration/badge.svg)

![Dependabot](https://flat.badgen.net/dependabot/strvcom/react-sliders?icon=dependabot)

[![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/strvcom/react-sliders&style=flat)](https://mergify.io)

[![npm latest](https://badgen.net/npm/v/@strv/react-sliders)](https://www.npmjs.com/package/@strv/react-sliders)

[![bundlephobia](https://badgen.net/bundlephobia/minzip/@strv/react-sliders)](https://bundlephobia.com/result?p=@strv/react-sliders)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

- [`@strv/react-sliders`](#strvreact-sliders)

  - [Features](#features)

  - [Install](#install)

  - [Usage](#usage)

    - [Basic Examples](#basic-examples)

      - [`useSlider`](#useslider)

      - [`useRangeSlider`](#userangeslider)

    - [Hooks API](#hooks-api)

  - [Related](#related)

    - [Contribution](#contribution)

    - [Authors](#authors)

    - [License](#license)

## Features

- [x] Customizable & CSS agnostic

  - **Modules**

    - `useRangeSlider`, `useSlider` (Hooks, which encapsulates the core logic and let consumers style their own sliders as they wish)

  - **Headless** (Inspiration [`react-table`](https://github.com/tannerlinsley/react-table), [`downshift-js`](https://github.com/downshift-js/downshift))

- [x] A11y

  - Full mouse & touch support

  - [Keyboard support](https://www.w3.org/TR/wai-aria-practices/examples/slider/slider-1.html)

- [x] API that is easy to use & integrate

  - with forms, ...

- [x] Tree-shakeable & Optimized bundle

  - out of the box thanks to [`TSDX`](https://github.com/formik/tsdx).

- [x] [Documented API](#hooks-api) with [interactive examples on CodeSandbox](examples/README.md)

- [x] Fully typed with TypeScript

- [x] Based on [our already existing open source tools](https://www.strv.io/tools/frontend)

  - [`code-quality-tools`](https://github.com/strvcom/code-quality-tools)

- [x] Properly tested

## Install

```bash

# npm

npm install @strv/react-sliders --save

# yarn

yarn add @strv/react-sliders

```

## Usage

### Basic Examples

#### `useSlider`

```tsx

import React from 'react'

import { useSlider } from '@strv/react-sliders'

const SliderExample = () => {

  const [value, setValue] = React.useState(0)

  const { getRailProps, getTrackProps, getHandleProps } = useSlider({

    value,

    min: 0,

    max: 100,

    onChange: setValue,

  })

  return (

    


      

      


      

    

  )

}

```


#### `useRangeSlider`

```tsx

import React from 'react'

import { useRangeSlider, TRangeTuple } from '@strv/react-sliders'

const RangeSliderExample = () => {

  const [value, setValue] = React.useState([0, 100])

  const { getRailProps, getTrackProps, getMinHandleProps, getMaxHandleProps } = useRangeSlider({

    value,

    min: 0,

    max: 100,

    onChange: setValue,

  })

  return (

    


      

      


      

      

    

  )

}

```


If you want so see more, head to the [list of existing CodeSandbox examples](examples/README.md).

### Hooks API

- [`useSlider`](src/hooks/docs/useSlider.md)

- [`useRangeSlider`](src/hooks/docs/useRangeSlider.md)

---

## Related

This project was bootstrapped with [`TSDX`](https://github.com/formik/tsdx).

### Contribution

See [Contributing guide](CONTRIBUTING.md)

### Authors

- Lukas Hudec ([@xhudec](https://github.com/xhudec))

### License

[MIT License](LICENSE)