The RangeInput component is a slider input for selecting numeric values within a specified range. It supports custom icons, step values, and size or color variants.

• Interactive slider: Drag or tap to select values.
• Bindable value: Supports two-way binding for reactive state updates.
• Customizable icons: Can display icons to indicate meaning or context.
• Flexible appearance: Supports size and color props for styling.
• Integrates with badges: Works with visual indicators for dynamic feedback.

Usage Example

Preview

0

0

bindable

0

0

0

0

0

0

0

0

0

0

0

0

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Badge, RangeInput } from "@fefade-ui/svelte"

  const homeIcon = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="red">
  <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
  </svg>
  `

  let inputValue = $state(0)
</script>

<div
  style="
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  "
>
  <RangeInput />
  <RangeInput icon={homeIcon} />

  <div style="display:flex; align-items: center; gap: 1rem;">
    <span>bindable</span>
    <RangeInput bind:value={inputValue} step="10" />
    <Badge roundedFull size="lg">
      <span>{inputValue}</span>
    </Badge>
  </div>

  <RangeInput bind:value={inputValue} step="10" />

  {#each Constants.sizes as size (size)}
    <RangeInput {size} />
  {/each}

  {#each Constants.statusColors as color (color)}
    <RangeInput {color} />
  {/each}
</div>

Props

Prop	Type	Default	Description
value	number	0	Current value of the slider.
bind:value	number	—	Two-way binding for reactive updates.
min	number	0	Minimum value of the range.
max	number	100	Maximum value of the range.
step	number	1	Step increment between values.
size	string	—	Visual size variant (small, medium, large).
color	string	—	Color variant indicating status or theme.
icon	string	—	Optional icon to display alongside the slider.
disabled	boolean	false	Disables user interaction.
class	string	—	Optional CSS classes for styling.
style	string	—	Inline style overrides.

Best Practices

• Use step to control granularity for precise value selection.
• Bind value to state for reactive UI updates.
• Use icons or labels to clarify slider purpose.
• Avoid overly small sliders for accessibility and usability.
• Combine with badges or visual indicators for instant feedback.