@zendeskgarden/container-slider

@zendeskgarden/container-slider

This package includes containers relating to Slider in the Garden Design System.

Installation

npm install @zendeskgarden/container-slider

Usage

Check out storybook for live examples.

useSlider

import { useSlider } from '@zendeskgarden/container-slider';

const Slider = () => {
  const trackRef = createRef();
  const minThumbRef = createRef();
  const maxThumbRef = createRef();
  const { getTrackProps, getMinThumbProps, getMaxThumbProps, minValue, maxValue } = useSlider({
    trackRef,
    minThumbRef,
    maxThumbRef
  });

  return (
    <div {...getTrackProps()} ref={trackRef}>
      <div {...getMinThumbProps()} minThumbRef={minThumbRef}>
        {minValue}
      </div>
      <div {...getMaxThumbProps()} maxThumbRef={maxThumbRef}>
        {maxValue}
      </div>
    </div>
  );
};

SliderContainer

import { SliderContainer } from '@zendeskgarden/container-slider';

const trackRef = createRef();
const minThumbRef = createRef();
const maxThumbRef = createRef();

<SliderContainer trackRef={trackRef} minThumbRef={minThumbRef} maxThumbRef={maxThumbRef}>
  {({ getTrackProps, getMinThumbProps, getMaxThumbProps, minValue, maxValue }) => (
    <div {...getTrackProps()} trackRef={trackRef}>
      <div {...getMinThumbProps()} minThumbRef={minThumbRef}>
        {minValue}
      </div>
      <div {...getMaxThumbProps()} maxThumbRef={maxThumbRef}>
        {maxValue}
      </div>
    </div>
  )}
</SliderContainer>;