Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX DYNAMIC SLIDERS FROM DATABASE

Need a customized slider bar with minimum, maximum values for your Wix website? This tutorial will show you how to improve your website's UI/UX with a customized slider bar. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/2

THE ELEMENTS

The Page

Slider Bar: #slider1

The Database

Create a database: Hotels (dataset1)

Recommended fields:

  • Minimum Value: Min

  • Maximum Value: Max

THE CODE

Page Code

$w.onReady(function () {

$w("#dataset1").onReady(() => {

 

let min = $w("#dataset1").getCurrentItem().min

let max = $w("#dataset1").getCurrentItem().max

 

$w("#slider1").min = min;  // Slider min value //

$w("#slider1").max = max; // Slider max value //

$w("#slider1").value = (min + max)/2;  // Starting value //

 

});

});

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP