(2022) Webflow Range Slider - No-Code Attributes

In this video, we learn how to build a Range Slider with Attributes. This Rage Slider can be used inside a Webflow form and the CMS filter system Attributes. We can take full control of what the Rage Slider does in our project.

TIMESTAMPS:
00:00 - Intro
00:42 - Docs Overview
00:48 - Add the script
01:07 - Live Implementation
01:30 - Docs Update
03:12 - Add Divs to the page
04:22 - Add Attributes to each div
05:13 - Elements Overview
06:40 - Create a visual
10:08 - Add Elements
11:45 - Set the Range Slider
14:30 - Value of the handle
15:17 - Format display
16:53 - Text Input Field
19:34 - Green Cars Example
20:07 - Two-handle Range Slider
21:43 - Range Slider Update
24:39 - Thank You

ATTRIBUTES: Add advanced features to your Webflow project without code. Attributes is the new way to implement @Finsweet into your @Webflow project.

-----------------------------------------------

// RESOURCES FROM THE VIDEO

-----------------------------------------------

// ABOUT US

We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!

-----------------------------------------------

// SOCIAL

-----------------------------------------------

// TAGS

#range #slider #webflow #attributes

-----------------------------------------------

Thanks for your support! 🤟

[RYS]

Great content! Maybe an idea for your next video: In the first 30 seconds, show me what the result of the tutorial will be. I had to skip to the end, to actually know what to expect. For me personally, I get wayyy more engaged if I immediately see something awesome I can build.

[AndresMenard]

What about making a range button for filtering? So have a button that allows filters from 0 - 100 and so on.

[shanny]

Hy, I am just starting with attributes but I have to display twice the value, I duplicated it but its not working, anyone have any idea? Would be great Thanks

[robbykribs]

This is incredible, thank you Joe! One question - how would I go about having the fill start at the center with the handle and fill outwards as it is dragged toward the min and max? Thanks in advance!

[SurflineDesign]

Looks cool. Only issue is after I implemented Component the only way I can interact with the handles is after I resize the window. Any insight would be much appreciated.

[stefanaleksiev]

I did everything that is needed, implement the cms filter and then added the range slider. If I leave the slider to the default positions it shows items on the list, as soon as I move it, it show empty list, why?

[palmersaddress]

This is amazing! Thanks so much for sharing. My use case will be a single handle with two values. A value displayed at the extreme left of the slider just like in the video, that value will display a number between 1 to 100, again just like in the video. However, I’d like a second value displayed at the extreme right of the slider which would display a calculation of 100 minus the value on the left. So if the slider was in the exact middle, both values would display 50. If the slider was at the one-quarter mark, the values would be 25 and 75 respectively. I feel like this should be fairly simple but I can’t figure out how to work in the calculation for the value at the extreme right. Any help would be fantastic! Just getting started with attributes and I’m so excited about the possibilities.

[RedSeaVisuals]

How can I access the data that is getting into the text input field outside of webflow? ie. an exported site, I want to grab that input field data into a var.

[danielpavey]

This is great! Any tips on how to display different values? My current project consists of a slider used for a person's height(ft) input. was hoping to adjust the step by inches

[pawe]

Can such a range slider be placed in the contact form/request for offer?

[ericschenkenberger]

Is it possible to get the commas to show up in the text input field in the form? I have a client that's using 11 digit numbers.

[RedSeaVisuals]

How can I make rangeslider.js report the the max range value to the input field as a string of my choosing? For example, if I have 1-101 as the range... I want the input field to get 1-100 as normal string numbers, but the 101 value reports as "ALL" to the input field. I am trying to build a selector that chooses between numbered items. but if you crank it to the max value... it says "ALL", instead of 101.

[liamlegaillard]

Hello I have a problem I put the attribute "fs-cmsfilter-field="Price" in fs-rangerslide_fill
and I also put fs-cmsfilter-field="Price" in a text block that contains my price but nothing gets filtered? Do you have an idea ?

Otherwise super Tuto all works wonderfully!

[AnasTabbah]

I have a problem with Range Slider, often the handle get stuck and can't move it? why is that?

[sergeyosipov]

Does everyone now how to change color effect after clicking slider handle? I have weird purple border here

[jonny_rich_]

Nice one guys! I have two questions; (1) I'm having trouble getting attribute to show a period in place of a comma when viewed from Denmark. Is there any way to force this to always be a specific format? And (2) Is it possible to have the submitted field also carry the same formatting? Thanks guys!

[RedSeaVisuals]

How do you get the attribute value "display-value" stored in a variable in javascript? I want to pass the values to other custom code, stored in a variable.

[goldenant]

anyone know how to set the display value to a different range of numbers? Say you have slider which the user can select 1, 2 or 3 and 1=$100 2=$125 3=$150.

[RedSeaVisuals]

When I slide the slider, my text value shows numbers and decimals... my step size is "1". But even when I do any step value... I get numbers and decimals. How do I get rounded integers?

[jasonhebert]

For anyone building this and using the CMS filter they completely miss a step in this video and in the documentation. On your "price" field in the item you're filtering you need to add the attribute fs-cmsfilter-field=price