RangeSlider

import { FormField, RangeSlider } from '@bindshq/stance-react';

export function Basic() {
  const gbp = (v: number) => `£${v}k`;
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Contract value">
        <RangeSlider
          defaultValue={[20, 80]}
          min={0}
          max={100}
          step={5}
          formatValue={gbp}
          showValue
          thumbLabels={['Minimum value', 'Maximum value']}
        />
      </FormField>
    </div>
  );
}

import { RangeSlider } from '@bindshq/stance-react';

export function MinimumGap() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <RangeSlider
        defaultValue={[9, 17]}
        min={0}
        max={24}
        minStepsBetween={2}
        thumbLabels={['Working hours start', 'Working hours end']}
        formatValue={(v) => `${String(v).padStart(2, '0')}:00`}
        showValue
        marks={[
          { value: 0, label: '00:00' },
          { value: 12, label: '12:00' },
          { value: 24, label: '24:00' },
        ]}
      />
    </div>
  );
}

import * as React from 'react';
import { RangeSlider } from '@bindshq/stance-react';

export function Controlled() {
  const [range, setRange] = React.useState<[number, number]>([0, 30]);
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 420 }}>
      <RangeSlider
        value={range}
        onValueChange={setRange}
        min={0}
        max={90}
        thumbLabels={['Newer than (days)', 'Older than (days)']}
      />
      <span style={{ fontSize: 14 }}>
        Showing documents sent {range[0]} to {range[1]} days ago
      </span>
    </div>
  );
}