Sliders

<SliderField
  label="Volume"
  ariaLabel="Volume"
  min={0}
  max={10}
  value={volume}
  formatValue={(value) => `${value} dB`}
  onChange={setVolume}
/>
<SliderField
  label="Code quality"
  ariaLabel="Code quality"
  min={0}
  max={100}
  value={quality}
  accentColor="#fb8c00"
  onChange={setQuality}
/>
<SliderField
  label="Optimism"
  ariaLabel="Optimism"
  min={0}
  max={100}
  value={optimism}
  accentColor="#43a047"
  onChange={setOptimism}
/>
<SliderField
  label="Legacy code (disabled)"
  ariaLabel="Legacy code"
  min={0}
  max={100}
  value={99}
  disabled
  formatValue={(value) => `${value}%`}
  onChange={() => {}}
/>
<SliderField
  label="Budget"
  ariaLabel="Budget"
  min={0}
  max={100}
  value={budget}
  valuePlacement="thumb"
  ticks={11}
  accentColor="#e53935"
  onChange={setBudget}
/>

<SliderField
  label="Temperature"
  ariaLabel="Temperature"
  layout="stacked"
  min={-10}
  max={40}
  step={0.5}
  value={temperature}
  formatValue={(value) => `${value} °C`}
  ticks={6}
  onChange={setTemperature}
/>
<SliderField
  label="Minimal temperature"
  ariaLabel="Minimal temperature"
  layout="stacked"
  min={-10}
  max={40}
  value={temperature}
  valuePlacement="none"
  onChange={setTemperature}
/>

<FormField label="Opacity">
  <Slider
    min={0}
    max={100}
    value={opacity}
    ariaLabel="Opacity"
    onChange={setOpacity}
  />
</FormField>

<RangeSlider
  min={0}
  max={100}
  {...range}
  showRangeInputs
  showRangeDisplay
  fromAriaLabel="Minimum amount"
  toAriaLabel="Maximum amount"
  onRangeChange={setRange}
/>

<Slider
  min={0}
  max={100}
  value={50}
  ariaLabel="Disabled slider"
  disabled
  onChange={() => {}}
/>

{renderScalarSlider(h, {
  min: 0,
  max: 100,
  step: 1,
  value: nativeSlider,
  label: 'Compact slider',
  onChange: setNativeSlider,
})}