Рет қаралды 11,849
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.
See all videos from the playlist: • Attributes
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Attributes: www.finsweet.com/attributes/r...
Live Example: attributes-rangeslider.webflo...
Get help with implementation: attributes@finsweet.com
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// 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!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#range #slider #webflow #attributes
-----------------------------------------------
Thanks for your support! 🤟