import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import RangeSlider from "./RangeSlider";
import {
  getColonSeparatedDuration,
  translateColonSeparatedDuration,
} from "./RangeSlider.storybook.js";

# Range Slider

> Input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type. Because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important.

<CodeBlock defaultValue={[100, 200]}>
  {(value, onChange) => (
    <RangeSlider
      start={0}
      end={1000}
      step={1}
      value={value}
      onChange={onChange}
      placeholder="Delay (seconds)"
      label="Multiple knob slider"
      testId="range-slider"
    />
  )}
</CodeBlock>

## Configuration

<ConfigBlock of={RangeSlider} />

## Examples

<CodeBlock title="Custom konb slider" defaultValue={[100, 200]}>
  {(value, onChange) => (
    <RangeSlider
      start={0}
      end={1000}
      step={1}
      value={value}
      renderInputValue={getColonSeparatedDuration}
      translateInputValue={translateColonSeparatedDuration}
      onChange={onChange}
      placeholder="Delay (mm:ss)"
      label="Custom konb slider"
    />
  )}
</CodeBlock>

<CodeBlock title="Single knob slider" defaultValue={200}>
  {(value, onChange) => (
    <RangeSlider
      start={0}
      end={1000}
      step={100}
      value={value}
      onChange={onChange}
      placeholder="Delay (seconds)"
      label="Single Range Slider"
      single
    />
  )}
</CodeBlock>

<CodeBlock title="Decimal step increment" defaultValue={2}>
  {(value, onChange) => (
    <RangeSlider
      start={0}
      end={5}
      step={0.5}
      value={value}
      onChange={onChange}
      placeholder="Delay (seconds)"
      label="Decimal step increment"
      single
    />
  )}
</CodeBlock>

<CodeBlock title="With error" defaultValue={100}>
  {(value, onChange) => (
    <RangeSlider
      start={0}
      end={1000}
      step={100}
      value={value}
      onChange={onChange}
      placeholder="Delay (seconds)"
      prefixClassName="range-slider"
      label="Range Slider with error message"
      error="Error message : invalid range"
      single
    />
  )}
</CodeBlock>