Create a Dynamic Range Slider with images - Build with KC Katalbas

Join host Nelson Abalos Jr and special guest KC Katalbas for a Build with our guest session. We’ll learn how to create a custom Dynamic Range Slider with images using low code.
A Dynamic Range Slider is an input field where users can select a numeric value within a given range (minimum and maximum values). Two examples of where you can use this is for donation type forms or for quoting a project cost.
Follow along with KC using the cloneable project:
webflow.com/website/image-ran...
Learn more about KC Katalbas:
/ kckatcreative
www.kckatalbas.com/
/ @artscistudio
----------
00:00:00 - Stream starting soon
00:01:44 - Stream starts
00:02:29 - Welcome KC!
00:06:03 - Stream agenda
00:06:40 - Build a dynamic range slider with KC
00:22:47 - Open Q&A starts
00:25:47 - “Is it possible to add a step functionality to the slider so that it moves in $10 increments?”
00:27:00 - “Is there a way to have it swap between images instead of adding images?”
00:28:25 - “How would I make it so that the layout doesn’t change so much when the number gets bigger?”
00:34:00 - “Are alt tags a problem with this type of slider? (i.e. since there’s so many images used in the output, does it impact how this page is ranked/read?)”
00:34:54 - Could you change the slider thumb image as it slides?
00:38:10 - “How difficult was it for you to finish the Fin-de project?”
00:40:30 - Himanshu’s site: kamomarsh-website.webflow.io/
00:0043:52 - “Question about the Dynamic Range slider: Do you ever feel like a fire on a birthday cake? Beautiful a moment then you wish it away?”
00:44:49 - KC’s site: cats-with-jobs.webflow.io/
00:47:28 - “How did you learn Javascript? Any resources you’d recommend for beginners?”
00:49:45 - “Any tips on laying out your Figma design for an easier time transferring it to Webflow?“
00:51:53 - “Any tips for designers looking to become a freelancer like you?”
00:56:35 - Outro
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@gazt100]

Do you know if it’s possible to control a Lottie animation using a range slider?

[@denniszenanywhere]

What’s the best resolution for the photos on banner image without affecting site speed?

[@Webflow]

It's always a good rule of thumb to keep your photos below 200KB. You can achieve this with a free tool called tinyjpg.com Hope this helps :)

[@denniszenanywhere]

How to do the 41:59 design with the photos just changing on its own?

[@Webflow]

You can achieve this with a Webflow Slider component. For more information, check out this article: university.webflow.com/lesson/slider

[@denniszenanywhere]

@@Webflow Thanks for the response. I've seen this video link but it only shows how to use the arrows to slide from one photo to the next. I'm looking at having the photos just automatically do a slideshow by itself, without the arrows in the left or right.