JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<div id="slider1"></div>
<div id="slider2"></div>
Value for slider 1, handle 1: <span id="v1"></span>
<hr>
Value for slider 1, handle 2: <span id="v2"></span>
<hr>
Value for slider 2, handle 1: <span id="v3"></span>
CSS
[id] { margin: 20px; }
JavaScript
var DATABASE = [
'Monkey'
,'Cow'
,'Chicken'
,'Sealion'
,'Tortoise'
,'Unicorn'
];
$('#slider1').noUiSlider({
range: [10,20]
,start: [11,19]
,handles: 2
,slide: function(){
// make a call to get variable from your database
// then write them on the global DATABASE variable.
// If this is an ajax call, you'll probably need to
// disable the other slider untill you have the
// new values available.
var values = $(this).val();
// Display values for the first slider
$('#v1').html(values[0]);
$('#v2').html(values[1]);
$('#slider2').attr('disabled', 'disabled');
// just 'DATABASE' will work,
// but you might want to to show
// this is a global variable but using
// window.DATABASE;
DATABASE = [
'Horse'
,'Elmo from Sesame Street'
,'Seagull'
,'Zebra'
,'Pony'
,'Giraffe'
];
// Call change, so it will trigger an update
$('#slider2').removeAttr('disabled');
// Get the second slider, then call the handler function.
// pass the native element along, so it becomes 'this'.
handler.call($('#slider2')[0]);
}
});
// Make the function accessible elsewhere.
function handler(){
// Get value from the slider
var value = $(this).val()[0];
// Map it to the DATABASE variable,
// then display it.
$('#v3').html(DATABASE[value]);
}
$('#slider2').noUiSlider({
range: [0,5]
,start: 0
,handles: 1
,slide: handler
});
$('#v3').html(DATABASE[0]);