Range & feedback

What this example shows

Range & feedback - SvSlider (single + range, ticks, keyboard) and SvGauge (radial arc with threshold bands). Theme-driven; standalone or in-grid.

Imports, features and API used

Imports: @svgrid/grid

Source code (256-range-feedback.svelte)

<script lang="ts">
  /**
   * Range & feedback - SvSlider (single + range, ticks, keyboard) and SvGauge
   * (radial arc with threshold bands). Theme-driven; standalone or in-grid.
   */
  import { SvSlider, SvGauge } from '@svgrid/grid'

  let volume = $state(60)
  let priceRange = $state<[number, number]>([200, 750])
  let temp = $state(72)

  const bands = [
    { from: 0, to: 40, color: '#3b82f6' },
    { from: 40, to: 75, color: '#16a34a' },
    { from: 75, to: 100, color: '#dc2626' },
  ]
</script>

<div class="wrap">
  <header>
    <h2>Range &amp; feedback</h2>
    <p>Value controls from <code>@svgrid/grid</code>: a slider (single or dual-thumb range) and a radial gauge with threshold bands.</p>
  </header>

  <section>
    <h3>SvSlider</h3>
    <div class="sliders">
      <div class="s">
        <label>Volume <strong>{volume}</strong></label>
        <SvSlider value={volume} onChange={(v) => (volume = v)} showValue ticks={5} />
      </div>
      <div class="s">
        <label>Price range <strong>${priceRange[0]} – ${priceRange[1]}</strong></label>
        <SvSlider value={priceRange} range min={0} max={1000} step={50} onChange={(v) => (priceRange = v)} showValue />
      </div>
      <div class="s vert">
        <label>Vertical</label>
        <SvSlider value={temp} onChange={(v) => (temp = v)} orientation="vertical" />
      </div>
    </div>
  </section>

  <section>
    <h3>SvGauge</h3>
    <div class="gauges">
      <div class="g">
        <SvGauge value={temp} unit="°" />
        <span class="cap">accent fill</span>
      </div>
      <div class="g">
        <SvGauge value={temp} {bands} label={`${temp}%`} />
        <span class="cap">threshold bands</span>
      </div>
      <div class="g">
        <SvGauge value={volume} sweep={180} size={160} needle={false} unit="%" />
        <span class="cap">half sweep, no needle</span>
      </div>
    </div>
    <p class="muted">The gauges track the slider values above - drag Volume / Vertical to watch them move.</p>
  </section>
</div>

<style>
  .wrap { padding: 22px; max-width: 820px; display: flex; flex-direction: column; gap: 24px; }
  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; max-width: 620px; }
  code { background: var(--sg-row-hover-bg, #eef2ff); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
  section h3 { margin: 0 0 12px; font-size: 14px; font-weight: 650; }
  .sliders { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
  .s { display: flex; flex-direction: column; gap: 8px; }
  .s label { font-size: 12.5px; font-weight: 600; }
  .s.vert { align-items: center; }
  .gauges { display: flex; gap: 32px; flex-wrap: wrap; }
  .g { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .cap { font-size: 11.5px; color: var(--sg-muted, #94a3b8); }
  .muted { margin: 14px 0 0; font-size: 12.5px; color: var(--sg-muted, #94a3b8); }
</style>

View this example on GitHub

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

• Slider - SvSlider: a filter block - a dual-thumb price range plus single sliders for rating and distance, with ticks and live formatted readouts.
• 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.