How to add an attribute:

close icon
Hey! Give us some feedback here.
Forms

Range Slider

Build a custom Range Slider Form component natively in Webflow.

4,030,394

loads per month

Webflow Libraries component

Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Wrapper
I want this
div block icon

Div Block

to be the entire Range Slider component
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-element
copy icon
Value
wrapper
copy icon
Check live example here
The parent wrapper that contains UI elements of the Range Slider
how to add range slider wrapper attribute
navigator arrow
Track
I want this
div block icon

Div Block

to be the track of the Range Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-element
copy icon
Value
track
copy icon
The 'track' of the Range Slider. This is the background that shows the entire width of the Range Slider.

IMPORTANT: This must be set to 'position: relative' so the nested fill can be set to absolute.
how to add range slider track attribute
navigator arrow
FILL
I want this
div block icon

Div Block

to be the fill of the Range Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-element
copy icon
Value
fill
copy icon
The 'fill color' of the Range Slider. This is the visual color that shows the active selected Range Slider values.

IMPORTANT: This must be set to 'position: absolute' so it can 'fill up' the parent track wrapper.
how to add range slider fill attribute
navigator arrow
Handle
I want this
div block icon

Div Block

to be the handle of the Range Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-element
copy icon
Value
handle
copy icon
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.

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'.
how to add range slider handle attribute
navigator arrow
Input
I want this
field element

Text Input Field

to hold the value of the Range Slider
See how it works
see webflow attributes
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.

If you are using Text Input Field to integrate with CMS Filter, refer to the FIELD IDENTIFIER dropdown below.

In both use cases, 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.
navigator arrow
Display Value
I want this

Text Block, Paragraph or Heading

to display the current value of the Range Slider handle(s)
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-element
copy icon
Value
display-value
copy icon
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.

By default, this value will display a number value without formatting. For example, 37662837. To format this number, use option fs-rangeslider-formatdisplay = true.
how to add range slider display value attribute
navigator arrow
Option
MIN
The minimum value of the Range Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-min
copy icon
Value
0
copy icon
The minimum value of the Range Slider.

For example, if the Range Slider goes from 0 to 100, "0" would be the minimum value.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
navigator arrow
Option
MAX
The maximum value of the Range Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-max
copy icon
Value
100
copy icon
The maximum value of the Range Slider.

For example, if the Range Slider goes from 0 to 100, "100" would be the maximum value.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
navigator arrow
Option
STEPS
The 'steps' of the Range Slider handle as it's being dragged
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-step
copy icon
Value
10
copy icon
As the Range Slider handle is being dragged, the steps indicate the values that can be selected in between the min and max values.

For 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.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
navigator arrow
Option
START
The starting value of a handle on the Range Slider
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-start
copy icon
Value
50
copy icon
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.
Where?
Add to the element with fs-rangeslider-element = "handle"
navigator arrow
Option
FORMAT DISPLAY
Format the display value like this 2,394,338
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-formatdisplay
copy icon
Value
true
copy icon
Format the display value to a number like this 2,394,338

Formatting defaults to the user's country conventions. Some countries use commas and other countries use dots.

Formatting will be selected from HTML lang attribute by default, modify this attribute's value  on your site settings (Settings> General> Language code) for the desired format.
Where?
Add to the element with fs-rangeslider-element = "wrapper"
navigator arrow
Option
UPDATE
Update the Range Slider <input> values as the handle is being moved or when the handle is released
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-rangeslider-update
copy icon
Value
move
copy icon
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.
Name
fs-rangeslider-update
copy icon
Value
release
copy icon
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 CMS 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.
Where?
Add to the element with fs-rangeslider-element = "wrapper"

Working examples

See this solution working live in this Webflow project.

Example 1
Range slider with 1 handle
$0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 2
Range slider with 2 handles
$0
$0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
copy icon
Copy this example

Frequently Asked Questions

Everything you need to know about this attributes solution.

Yes you can, add fs-cmsfilter-type = date to your element with fs-cmsfilter-field = "IDENTIFIER".

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.