@wix/design-system/dist/docs/components/RangeExamples.md

@wix/design-system

## Feature Examples


### Structure
- description: Component is an empty container that merges two input fields horizontally.
- example: 
```jsx 
<Range>
  <StorybookComponents.Placeholder>First Input</StorybookComponents.Placeholder>
  <StorybookComponents.Placeholder>Second Input</StorybookComponents.Placeholder>
</Range>;
```

### Range type
- description: Accept three types of data inputs as child elements:<br/>
        &emsp;- `<DatePicker/>` <br/>
        &emsp;- `<NumberInput/>` <br/>
        &emsp;- `<Input/> ` - use with number values only.
- example: 
```jsx 
() => {
  const [fromDate, setFromDate] = React.useState();
  const [toDate, setToDate] = React.useState();

  return (
    <StorybookComponents.Stack flexDirection="column">
      <Range>
        <DatePicker
          placeholderText="Date"
          value={fromDate}
          onChange={setFromDate}
        />
        <DatePicker
          placeholderText="Date"
          value={toDate}
          onChange={setToDate}
        />
      </Range>
      <Range>
        <NumberInput placeholder="Number" />
        <NumberInput placeholder="Number" />
      </Range>
      <Range>
        <Input placeholder="Input" type="number" />
        <Input placeholder="Input" type="number" />
      </Range>
    </StorybookComponents.Stack>
  );
};
```




    


## Common Use Case Examples


### Disabled start or end of a range
- description: Control interaction states per each field - make it disabled, readOnly, etc.
- example: 
```jsx 
() => {
  const [fromDate, setFromDate] = React.useState();
  const [toDate, setToDate] = React.useState();
  const [toDateDisabled, setToDateDisabled] = React.useState(false);

  const renderRange = () => (
    <Range>
      <DatePicker
        placeholderText="From"
        id="fromDate"
        value={fromDate}
        onChange={setFromDate}
      />
      <DatePicker
        placeholderText={toDateDisabled ? '--/--/----' : 'To'}
        id="toDate"
        disabled={toDateDisabled}
        value={toDate}
        onChange={setToDate}
      />
    </Range>
  );

  const renderDateDisabledCheckbox = () => (
    <Checkbox
      checked={toDateDisabled}
      onChange={() => setToDateDisabled(!toDateDisabled)}
    >
      Don't set an end date
    </Checkbox>
  );

  return (
    <FormField
      label="Valid between"
      infoContent="Set when the coupon is valid from and when it expires."
    >
      <Box gap="24px">
        {renderRange()}
        {renderDateDisabledCheckbox()}
      </Box>
    </FormField>
  );
};
```

### Multiple values
- description: Use range to control a single entity that is combined from two values, e.g. duration from hours and minutes.
- example: 
```jsx 
() => {
  const [hours, setHours] = React.useState(4);
  const [minutes, setMinutes] = React.useState(15);

  return (
    <Box gap="15px">
      <FormField label="Session Duration">
        <Range>
          <NumberInput
            suffix={<Input.Affix>Hrs</Input.Affix>}
            value={hours}
            onChange={setHours}
          />
          <NumberInput
            suffix={<Input.Affix>Min</Input.Affix>}
            value={minutes}
            onChange={setMinutes}
          />
        </Range>
      </FormField>
      <FormField
        label="Buffer Time"
        infoContent="Adding a few minutes after each session is a good way to create short breaks."
      >
        <Dropdown
          placeholder="Select"
          options={[
            { id: 0, value: '5 min' },
            { id: 1, value: '10 min' },
            { id: 2, value: '15 min' },
            { id: 2, value: '20 min' },
          ]}
        />
      </FormField>
    </Box>
  );
};
```