Skip to content

strvcom/react-sliders

Repository files navigation

@strv/react-sliders

Continuous Integration Dependabot Mergify Status npm latest bundlephobia code style: prettier semantic-release

Features

Install

# npm
npm install @strv/react-sliders --save

# yarn
yarn add @strv/react-sliders

Usage

Basic Examples

useSlider

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 (
    <div className="slider-container">
      <span className="slider-rail" {...getRailProps()} />
      <span className="slider-track" {...getTrackProps()} />

      <span className="slider-handle" {...getHandleProps()} />
    </div>
  )
}

useRangeSlider

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

const RangeSliderExample = () => {
  const [value, setValue] = React.useState<TRangeTuple>([0, 100])
  const { getRailProps, getTrackProps, getMinHandleProps, getMaxHandleProps } = useRangeSlider({
    value,
    min: 0,
    max: 100,
    onChange: setValue,
  })

  return (
    <div className="range-slider-container">
      <span className="range-slider-rail" {...getRailProps()} />
      <span className="range-slider-track" {...getTrackProps()} />

      <span className="range-slider-handle" {...getMinHandleProps()} />
      <span className="range-slider-handle" {...getMaxHandleProps()} />
    </div>
  )
}

If you want so see more, head to the list of existing CodeSandbox examples.

Hooks API


Related

This project was bootstrapped with TSDX.

Contribution

See Contributing guide

Authors

License

MIT License

About

CSS agnostic React Sliders

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •