Slider

<div class="border-border-subtle bg-surface-elevated w-full space-y-3 rounded-2xl border p-5">
  <Slider
    label="Price Range"
    range
    bind:value={priceRange}
    min={0}
    max={1000}
    step={25}
    showValue
    intent="success"
    formatValue={(v) => {
      if (Array.isArray(v)) return `$${v[0]} – $${v[1]}`;
      return `$${v}`;
    }}
  />
</div>

<Slider
  label="Temperature"
  bind:value={temperature}
  min={16}
  max={30}
  step={1}
  showValue
  formatValue={(v) => `${v}°C`}
  marks={[
    { value: 16, label: '16°' },
    { value: 20, label: '20°' },
    { value: 24, label: '24°' },
    { value: 28, label: '28°' },
    { value: 30, label: '30°' }
  ]}
/>

<Slider
  label="Consumption-based share of heating costs"
  bind:value={consumptionShare}
  min={0}
  max={100}
  step={5}
  validRange={[50, 100]}
  recommendedRange={[60, 80]}
  showValue
  formatValue={(v) => `${v} %`}
  rangeStatusText={{
    insideRecommended: 'Billing-regulation standard (recommended)',
    insideValidOnly: 'Compliant with the billing regulation, but outside the recommendation',
    outsideValid: 'Billing-regulation violation: at least 50 % must be consumption-based'
  }}
/>
<Slider
  label="Hot water temperature"
  bind:value={waterTemperature}
  min={40}
  max={80}
  step={1}
  validRange={[60, 80]}
  showValue
  formatValue={(v) => `${v} °C`}
  rangeStatusText={{
    insideRecommended: 'Legionella protection satisfied',
    outsideValid: 'Legionella risk: at least 60 °C recommended'
  }}
/>
<Slider
  label="Payback period"
  bind:value={amortYears}
  min={0}
  max={30}
  step={1}
  recommendedRange={[10, 20]}
  outOfValidRangeIntent="warning"
  showValue
  formatValue={(v) => `${v} years`}
  rangeStatusText={{
    insideRecommended: 'Economically viable corridor',
    insideValidOnly: 'Outside the typical corridor'
  }}
/>

<Slider
  label="Brightness"
  bind:value={brightness}
  showValue
  formatValue={(v) => `${v}%`}
  helper="Adjust screen brightness"
/>
<Slider
  label="Budget"
  value={0}
  showValue
  formatValue={(v) => `$${v}`}
  error="Please set a budget above $0"
/>

<Slider
  label="Opacity"
  value={40}
  showValue
  formatValue={(v) => `${v}%`}
  slotClasses={{
    track: 'h-1 bg-primary/15',
    range: 'bg-primary',
    thumb: 'size-5 border-2'
  }}
/>