fs-rangeslider

Build a custom Range Slider Form component natively in Webflow

Overview

The fs-rangeslider attribute creates fully customizable range slider components with single or dual handles, value displays, and extensive formatting options. Perfect for price filters, quantity selectors, and any numeric range input.

Attribute Syntax

The attribute uses the following syntax:

fs-rangeslider-element="[element-type]"
fs-rangeslider-[setting]="[value]"

Elements

wrapper

Defines the range slider instance wrapper element.

<div fs-rangeslider-element="wrapper">
  <!-- Slider components -->
</div>

track

Defines the track of the slider along which handles move.

<div fs-rangeslider-element="track"></div>

fill

Defines the filled portion of the slider between handles.

<div fs-rangeslider-element="fill"></div>

handle

Defines a draggable handle on the slider. Can have one or two handles for single or range selection.

<div fs-rangeslider-element="handle"></div>

display-value

Defines an element to display a handle’s current value.

<div fs-rangeslider-element="display-value"></div>

Settings

min

Defines the minimum value of the range.

fs-rangeslider-min="0"

max

Defines the maximum value of the range.

fs-rangeslider-max="100"

start

Defines the starting value of a handle. Applied to handle elements.

<div 
  fs-rangeslider-element="handle"
  fs-rangeslider-start="25"
></div>

step

Defines the increment step for values.

fs-rangeslider-step="5"

update

Defines when the input elements should be updated.

• "move" (default) - Update while dragging
• "release" - Update only when handle is released

fs-rangeslider-update="release"

lazy

Defines if input values should be updated lazily (debounced).

fs-rangeslider-lazy="true"

formatdisplay

Enables value formatting for display elements.

fs-rangeslider-formatdisplay="true"

Format Options

Extensive formatting options using the Intl.NumberFormat API:

fs-rangeslider-formatcurrency="USD"
fs-rangeslider-formatstyle="currency"
fs-rangeslider-formatminimumfractiondigits="2"
fs-rangeslider-formatmaximumfractiondigits="2"

Available format settings:

• formatcurrency - Currency code (e.g., “USD”, “EUR”)
• formatstyle - “decimal”, “currency”, “percent”, “unit”
• formatnotation - “standard”, “scientific”, “engineering”, “compact”
• formatminimumfractiondigits - Minimum decimal places
• formatmaximumfractiondigits - Maximum decimal places
• formatunit - Unit type for “unit” style
• And many more Intl.NumberFormat options

Usage Examples

Basic Single Handle Slider

<div 
  fs-rangeslider-element="wrapper"
  fs-rangeslider-min="0"
  fs-rangeslider-max="100"
>
  <!-- Track -->
  <div fs-rangeslider-element="track">
    <!-- Fill -->
    <div fs-rangeslider-element="fill"></div>
    
    <!-- Handle -->
    <div 
      fs-rangeslider-element="handle"
      fs-rangeslider-start="50"
    ></div>
  </div>
  
  <!-- Display value -->
  <div fs-rangeslider-element="display-value"></div>
  
  <!-- Hidden input for form submission -->
  <input type="hidden" name="value">
</div>

How It Works

1. Initializes on elements with the wrapper attribute
2. Creates handle instances from handle elements
3. Sets up track dimensions and handle constraints
4. Listens for mouse/touch events on handles and track
5. Calculates values based on handle position
6. Updates display elements with formatted values
7. Syncs hidden inputs for form submission
8. Handles keyboard navigation with arrow keys
9. Responds to window resize and visibility changes

Keyboard Controls

When a handle is focused:

• Arrow Up / Arrow Right - Increment value by step
• Arrow Down / Arrow Left - Decrement value by step

Multiple Sliders

Create multiple independent sliders using instance identifiers:

<div fs-rangeslider="1">
  <!-- Slider 1 -->
</div>

<div fs-rangeslider="2">
  <!-- Slider 2 -->
</div>

Form Integration

The slider automatically updates associated input fields (typically hidden inputs) that can be submitted with forms:

<form>
  <div fs-rangeslider-element="wrapper" ...>
    <!-- Slider elements -->
    <input type="hidden" name="price-min">
    <input type="hidden" name="price-max">
  </div>
  
  <button type="submit">Apply Filters</button>
</form>

Accessibility

The range slider includes:

• Full keyboard support
• ARIA attributes
• Focus management
• Touch and mouse support
• Screen reader compatible

Use formatdisplay="true" with currency or percentage formatting to create professional-looking value displays without additional JavaScript.

The slider automatically handles browser resizing and elements that are initially hidden, ensuring proper dimensions and positioning.

Ensure the wrapper has proper dimensions (width/height) set in Webflow, as the slider calculates positions based on the track’s size.