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
Add a Wix Slider Bar to your dynamic page. Then create a database for your slider bar values (i.e. Min & Max values). Finally add Wix code to your page.
Visitors will see customized minimum, maximum values on your slider bar when they navigate between your dynamic pages.
Add a Wix Slider Bar to your dynamic page. Then create a database for your slider bar values (i.e. Min & Max values). Finally add Wix code to your page.
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.