Slider

import { Slider } from "@clawscale/react";
import { useState } from "react";

export default function SliderBasic() {
  const [workers, setWorkers] = useState(12);
  return (
    <Slider
      handleHtmlProps={{ "aria-label": "Worker count" }}
      labelStepSize={8}
      max={32}
      min={0}
      value={workers}
      onChange={setWorkers}
    />
  );
}

import { RangeSlider } from "@clawscale/react";
import { useState } from "react";

export default function SliderRange() {
  const [replicas, setReplicas] = useState<[number, number]>([4, 16]);
  return (
    <RangeSlider
      handleHtmlProps={{ start: { "aria-label": "Minimum replicas" }, end: { "aria-label": "Maximum replicas" } }}
      labelStepSize={8}
      max={32}
      min={0}
      value={replicas}
      onChange={setReplicas}
    />
  );
}

import { MultiSlider, MultiSliderHandle } from "@clawscale/react";
import { useState } from "react";

export default function SliderMulti() {
  const [warning, setWarning] = useState(70);
  const [critical, setCritical] = useState(90);
  return (
    <MultiSlider labelStepSize={20} max={100} min={0}>
      <MultiSliderHandle
        htmlProps={{ "aria-label": "Disk usage warning threshold" }}
        intentAfter="warning"
        intentBefore="success"
        value={warning}
        onChange={setWarning}
      />
      <MultiSliderHandle
        htmlProps={{ "aria-label": "Disk usage critical threshold" }}
        intentAfter="danger"
        value={critical}
        onChange={setCritical}
      />
    </MultiSlider>
  );
}

import { Slider } from "@clawscale/react";
import { useState } from "react";

export default function SliderVertical() {
  const [cpuLimit, setCpuLimit] = useState(65);
  return (
    <Slider
      handleHtmlProps={{ "aria-label": "CPU limit" }}
      labelStepSize={25}
      max={100}
      min={0}
      value={cpuLimit}
      vertical
      onChange={setCpuLimit}
    />
  );
}

import { Slider } from "@clawscale/react";
import { useState } from "react";

export default function SliderLabelRenderer() {
  const [sampleRate, setSampleRate] = useState(0.25);
  const [timeoutMs, setTimeoutMs] = useState(1500);
  return (
    <>
      <Slider
        handleHtmlProps={{ "aria-label": "Sample rate" }}
        labelRenderer={(value) => `${Math.round(value * 100)}%`}
        labelStepSize={0.25}
        max={1}
        min={0}
        stepSize={0.05}
        value={sampleRate}
        onChange={setSampleRate}
      />
      <Slider
        handleHtmlProps={{ "aria-label": "Request timeout" }}
        labelRenderer={(value, opts) => (opts?.isHandleTooltip ? `${value} ms` : `${value / 1000} s`)}
        labelStepSize={1000}
        max={5000}
        min={0}
        stepSize={100}
        value={timeoutMs}
        onChange={setTimeoutMs}
      />
    </>
  );
}