Slider

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

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Logo width" description="Applies to every signature in the template.">
        <Slider
          defaultValue={120}
          min={60}
          max={240}
          step={10}
          formatValue={(v) => `${v}px`}
          showValue
        />
      </FormField>
    </div>
  );
}

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

export function Marks() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Reminder frequency">
        <Slider
          defaultValue={3}
          min={1}
          max={7}
          marks={[
            { value: 1, label: 'Daily' },
            { value: 3, label: '3 days' },
            { value: 7, label: 'Weekly' },
          ]}
          formatValue={(v) => (v === 1 ? 'every day' : `every ${v} days`)}
        />
      </FormField>
    </div>
  );
}

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

export function Controlled() {
  const [value, setValue] = React.useState(60);
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 420 }}>
      <Slider
        aria-label="Banner opacity"
        value={value}
        onValueChange={setValue}
        formatValue={(v) => `${v}%`}
      />
      <span style={{ fontSize: 14 }}>Banner opacity: {value}%</span>
    </div>
  );
}

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

export function Vertical() {
  return <Slider aria-label="Volume" orientation="vertical" defaultValue={40} showValue />;
}