Slider

What this example shows

SvSlider - a production filter block: a dual-thumb price range plus single sliders for rating and distance, with live formatted readouts. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (318-slider.svelte)

<script lang="ts">
  /**
   * SvSlider - a production filter block: a dual-thumb price range plus single
   * sliders for rating and distance, with live formatted readouts. Copy-paste
   * ready.
   */
  import { SvSlider } from '@svgrid/grid'

  let price = $state<[number, number]>([200, 800])
  let minRating = $state(4)
  let distance = $state(10)
  const money = (n: number) => `$${n.toLocaleString()}`
</script>

<div class="wrap">
  <header>
    <h2>Slider</h2>
    <p>Single or dual-thumb range (WAI-ARIA slider) with steps, ticks and keyboard - price filters, thresholds, settings.</p>
  </header>

  <div class="panel">
    <div class="filter">
      <div class="lbl"><span>Price range</span><strong>{money(price[0])} - {money(price[1])}</strong></div>
      <SvSlider value={price} range min={0} max={1000} step={50} ticks={5} labels="all" formatValue={(v) => `$${v}`} onChange={(v) => (price = v)} />
    </div>

    <div class="filter">
      <div class="lbl"><span>Minimum rating</span><strong>{minRating}+ stars</strong></div>
      <SvSlider value={minRating} min={1} max={5} step={1} ticks={5} labels="endpoints" showValue onChange={(v) => (minRating = v)} />
    </div>

    <div class="filter">
      <div class="lbl"><span>Within</span><strong>{distance} km</strong></div>
      <SvSlider value={distance} min={1} max={50} formatValue={(v) => `${v} km`} onChange={(v) => (distance = v)} />
    </div>
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 460px; display: flex; flex-direction: column; gap: 16px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .panel { display: flex; flex-direction: column; gap: 22px; padding: 18px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; }
  .filter { display: flex; flex-direction: column; gap: 4px; }
  .lbl { display: flex; justify-content: space-between; font-size: 13px; }
  .lbl span { color: var(--sg-muted, #64748b); font-weight: 600; }
</style>

View this example on GitHub

Related documentation

• SvSlider

Related articles

• Copy a Cell Range to the Clipboard in SvGrid - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.
• Spreadsheet-Style Cell Range Selection in SvGrid - How to enable drag-to-select cell ranges, read live selection state, and build a status-bar footer that sums and averages the selected values.

More Range & Feedback examples

• Range & feedback - SvSlider (single or dual-thumb range, ticks, keyboard, vertical) and SvGauge (radial arc with threshold bands, needle, half sweep). Theme-driven value controls, standalone or in-grid.
• Gauge - SvGauge: a KPI dashboard - radial gauges with colored threshold bands, a live-updating needle, and a needle-less storage tile.
• Progress (linear + circular) - SvProgress and SvCircularProgress: determinate + indeterminate progress with color intents, sizes, labels, striped fill, a buffered track, and a custom ring center. WAI-ARIA progressbar, reduced-motion aware.
• Feedback & display: badge, avatar, skeleton, card - SvBadge (status pills), SvAvatar (image + initials/colour-hash fallback + presence dot), SvSkeleton (shimmer loaders) and SvCard (surface) - the display layer for dashboards and detail panels. Toggle loading to swap content for skeletons.
• Status & display: alert, stat, timeline, chip, divider, empty - SvAlert (inline info/success/warning/danger messages with actions), SvStat (KPI cards with auto-coloured up/down deltas, invertible), SvTimeline (activity feed), SvChip (removable/clickable pills with avatars), SvDivider (labeled + vertical) and SvEmptyState. The status + display layer for dashboards and detail screens.