AttRibutes
range slider
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Range Slider

Build a custom Range Slider Form component natively in Webflow.

Range Slider • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Wrapper

The parent wrapper that contains UI elements of the Range Slider.

fs-rangeslider-element
=
"
wrapper
"

Track

The 'track' of the Range Slider.

fs-rangeslider-element
=
"
track
"

Fill

The 'fill color' of the Range Slider.

fs-rangeslider-felement
=
"
fill
"

Fill

The 'handle' of the Range Slider.

fs-rangeslider-felement
=
"
handle
"

Optional attributes

Display Value

Display the current value of the Range Slider.
Add to any element inside the Wrapper element

fs-rangeslider-element
=
"
display-value
"

FIELD IDENTIFIER

Add to Text Input Field when filtering a list

fs-list-field
=
"
IDENTIFIER
"

Range From

Add to the Text Input Field that should represent the 'from' value (or 'min' value)

fs-list-range
=
"
from
"

Range to

Add to the Text Input Field that should represent the 'to' value (or 'max' value)

fs-list-range
=
"
to
"

Min

Add to the Wrapper element
The minimum value for the Range Slider

fs-rangeslider-min
=
"
VALUE
"

Max

Add to the wrapper element
The maximum value for the Range Slider

fs-rangeslider-max
=
"
VALUE
"

Steps

Add to the wrapper element
The steps of the Range Slider handle as it is being draggedfs-rangeslider-step

fs-rangeslider-step
=
"
VALUE
"

Start

Add to the wrapper element
The starting value of the Range Slider's handlesfs-rangeslider-start

fs-rangeslider-start
=
"
VALUE
"

Format

Add to the wrapper element.
Format the display value to a number like this 2,394,338

fs-rangeslider-formatdisplay
=
"
true
"

Max

Add to the wrapper element
Update the slider input as the handles is moved or when the handle is released

fs-rangeslider-update
=
"
move
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-rangeslider
></script>

Copy Script
2

Add these required attributes to the elements

Range Slider Wrapper

Wrapper element that will hold all slider elements
fs-rangeslider-element
=
"
wrapper
"

The parent wrapper that contains UI elements of the Range Slider.

Add this attribute:
Name
fs-rangeslider-element
Copy
Value
wrapper
Copy
Add it to those type(s) of element(s):
Div Block
back arrow

Track

Track of the Range Slider
fs-rangeslider-element
=
"
track
"

The 'track' of the Range Slider. This is the background that shows the entire width of the Range Slider.

Add this attribute:
Name
fs-rangeslider-element
Copy
Value
track
Copy
Add it to those type(s) of element(s):
Div Block
IMPORTANT

This must be set to position: relative so the nested Fill can be set to position: absolute.

back arrow

Fill

Fill of the Range Slider
fs-rangeslider-element
=
"
fill
"

The 'fill color' of the Range Slider. This is the visual color that shows the active selected Range Slider values.

Add this attribute:
Name
fs-rangeslider-element
Copy
Value
fill
Copy
Add it to those type(s) of element(s):
Div Block
IMPORTANT

This must be set to position: absolute so it can 'fill up' the parent Track wrapper.

Handle

Handle of the Range Slider
fs-rangeslider-element
=
"
handle
"

The 'handle' of the Range Slider. This is the circle that the user can drag to change the values in the Range Slider.

This does not have to be a circle. It can be any shape made from a div, or an <img> image element.

If you are using two handles in the Range Slider. Add two handle elements to the Range Slider component UI. The two handles can be siblings of each other. The first handle will be the first (min) handle. The second handle will be the second (max) handle.

Add this attribute:
Name
fs-rangeslider-element
Copy
Value
handle
Copy
Add it to those type(s) of element(s):
Div Block
Image
IMPORTANT

This must be set to position: absolute so it can be properly dragged across the Track wrapper. Attributes will automatically apply transform CSS properties to the handle to assure it's always in the correct location across the Track. You do not have to apply these transform properties to the handle. Just nest inside the Track and apply position: absolute.

Input

Holds the value of the Range Slider
No attributes are needed

The form input that holds the value of the range slider. If using this Text Input Field for a web form submission, there are no attributes needed.

Add it to those type(s) of element(s):
Input
IMPORTANT

The Text Input Field must match either one or two Handles. If you use two Handles, add two Text Input Fields. If you use one Handle, add one Text Input Field.

NOTE

If you are using Text Input Field to integrate with List Filter, refer to the Filter Field settings below.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Display Value

Display the current value of the track handle(s)
fs-rangeslider-element
=
"
display-value
"

Display the current value of the Range Slider.

This element can go anywhere inside the fs-rangeslider-element = wrapper.

When using two handles on the Range Slider, place two display-value attributes inside the wrapper. The first display-value will show the value of the first handle. The second display-value will display the value of second handle.

Add this attribute:
Name
fs-rangeslider-element
Copy
Value
display-value
Copy
Add it to those type(s) of element(s):
Text Block
Paragraph
Heading
Add it to any element with
fs-rangeslider-element = "wrapper"
NOTE

By default, this value will display a number value without formatting. For example, 37662837. To format this number, use option fs-rangeslider-formatdisplay = true.

Optional

Add more

settings

Update

Update the slider input based on user interaction with the handles
fs-rangeslider-update
=
"
VALUE
"
Values allowed
Move
Release

The value of the range slider <input> will be updated on every single move of the Handle. As the user moves the Handle, the <input> constantly updates.

"move" is the default option.

Add this attribute:
Name
fs-rangeslider-update
Copy
Value
move
Copy
Example:
fs-rangeslider-update = "move"
Add it to any element with
fs-rangeslider-element = "wrapper"

The value of the range slider <input> will be updated when the user releases the mouse/finger from the handle.

This is useful for when using Range Slider with List Filter. We may not want to constantly trigger a new filter cycle when the user is still moving the handle. Instead we trigger a single filter cycle when the user releases the Handle.

The display-value elements will still be updated real-time as the user moves the Handle.

Add this attribute:
Name
fs-rangeslider-update
Copy
Value
release
Copy
Example:
fs-rangeslider-update = "release"
Default:
fs-rangeslider-update = "move"
Add it to any element with
fs-rangeslider-element = "wrapper"

Format Display

Define number, time, and date formats based on user locales.
fs-rangeslider-formatdisplay
=
"
VALUE
"
Values allowed
True
BCP 47 Tags

Format the display value to a number like this 2,394,338.

If fs-list-formatdisplay is set to true, the format will automatically use the default locale based on the user’s browser settings. This means that date, time, and number formats will align with the locale preferences specified in their browser.

Add this attribute:
Name
fs-rangeslider-formatdisplay
Copy
Value
true
Copy
Example:
fs-rangeslider-formatdisplay = "true"
Add it to any element with
fs-rangeslider-element = "wrapper"

A specific locale or format can be forced using BCP 47 language tags.

Add this attribute:
Name
fs-rangeslider-formatdisplay
Copy
Value
BCP-47-TAG
Copy
Example:
fs-rangeslider-formatdisplay = "fr-FR"
Default:
fs-rangeslider-formatdisplay = "true"
Add it to any element with
fs-rangeslider-element = "wrapper"

Start

The starting value of the Range Slider's handles
fs-rangeslider-start
=
"
NUMBER
"

The initial value of the handle on page load.

This attribute is set on the Handle element. If using two handles in the Range Slider, this attribute can be set to each handle.

If not set, the first Handle starts at the min value, and the second Handle starts at the max value.

Add this attribute:
Name
fs-rangeslider-start
Copy
Value
NUMBER
Copy
Example:
fs-rangeslider-start = "10"
Add it to any element with
fs-rangeslider-element = "handle"

Steps

The steps of the Range Slider handle as it is being dragged
fs-rangeslider-step
=
"
NUMBER
"

As the Range Slider handle is being dragged, the steps indicate the values that can be selected in between the min and max values.

Add this attribute:
Name
fs-rangeslider-step
Copy
Value
NUMBER
Copy
Example:
fs-rangeslider-step = "5"
Add it to any element with
fs-rangeslider-element = "wrapper"
EXAMPLE

If the range slider goes from 0 to 100, and you want the user to be able to make selections by ‘10s’, the step would be ‘"10". In this example, the user would be able to select 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, and 100 from the range slider.

Min

The minimum value for the Range Slider
fs-rangeslider-min
=
"
NUMBER
"

The minimum value of the Range Slider.

Add this attribute:
Name
fs-rangeslider-min
Copy
Value
NUMBER
Copy
Example:
fs-rangeslider-min = "0"
Add it to any element with
fs-rangeslider-element = "wrapper"
EXAMPLE

For example, if the Range Slider goes from 0 to 100, "0" would be the minimum value.

Max

The maximum value for the Range Slider
fs-rangeslider-max
=
"
NUMBER
"

The maximum value of the Range Slider.

Add this attribute:
Name
fs-rangeslider-max
Copy
Value
NUMBER
Copy
Example:
fs-rangeslider-max = "100"
Add it to any element with
fs-rangeslider-element = "wrapper"
EXAMPLE

For example, if the Range Slider goes from 0 to 100, "100" would be the maximum value.

Filter Field

Use this solution with List Filter
fs-list-field
=
"
IDENTIFIER
"

Display the current value of the Range Slider inside a text field input.

This is required when using a Range Slider with List Filter.

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-field = "price"
Add it to those type(s) of element(s):
Input

Add to the Text Input Field that should represent the 'from' value (or 'min' value).

Add this attribute:
Name
fs-list-operator
Copy
Value
greater-equal
Copy
Example:
fsi-list-operator = "greater-equal"
Add it to any element with
fs-list-field = "IDENTIFIER"

Add to the Text Input Field that should represent the 'to' value (or 'max' value).

Add this attribute:
Name
fs-list-operator
Copy
Value
less-equal
Copy
Example:
fsi-list-operator = "less-equal"
Add it to any element with
fs-list-field = "IDENTIFIER"
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-rangeslider-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-rangeslider-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-rangeslider-instance = "1"
fs-rangeslider-instance = "2"
fs-rangeslider-instance = "price"
fs-rangeslider-instance = "days"
Learn more ways to set up multiple instances and how it works