Slider

export const Default = () => {
  const [v, setV] = useState(45);
  return (
    <div style={{ width: 280 }}>
      <input
        type="range"
        className="acrm-slider"
        min={0}
        max={100}
        value={v}
        onChange={(e) => setV(+e.target.value)}
        style={fill(v)}
        aria-label="Probability"
      />
    </div>
  );
};

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="value 0">
        <input
          type="range"
          className="acrm-slider"
          min={0}
          max={100}
          defaultValue={0}
          style={fill(0)}
          aria-label="Value 0"
        />
      </Labeled>
      <Labeled label="value 45">
        <input
          type="range"
          className="acrm-slider"
          min={0}
          max={100}
          defaultValue={45}
          style={fill(45)}
          aria-label="Value 45"
        />
      </Labeled>
      <Labeled label="value 100">
        <input
          type="range"
          className="acrm-slider"
          min={0}
          max={100}
          defaultValue={100}
          style={fill(100)}
          aria-label="Value 100"
        />
      </Labeled>
      <Labeled label="disabled (native)">
        <input
          type="range"
          className="acrm-slider"
          min={0}
          max={100}
          defaultValue={45}
          style={fill(45)}
          aria-label="Disabled"
          disabled
        />
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus: keyboard focus draws the foundation ring on the thumb — no slider-specific style.
    </span>
  </div>
);

export const Composition = () => {
  const [v, setV] = useState(60);
  return (
    <div style={{ width: 360 }}>
      <Field label="Win probability" hint="Used for the weighted forecast.">
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' }}>
          <input
            type="range"
            className="acrm-slider"
            min={0}
            max={100}
            value={v}
            onChange={(e) => setV(+e.target.value)}
            style={fill(v)}
            aria-label="Win probability"
          />
          <Input
            type="number"
            className="acrm-input--num"
            min={0}
            max={100}
            value={v}
            onChange={(e) => setV(Math.max(0, Math.min(100, +e.target.value || 0)))}
            aria-label="Win probability (%)"
          />
        </div>
      </Field>
    </div>
  );
};