JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div>
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div> 
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div> 

<div class="calc-deposit"></div>
<div class="calc-loan"></div>
<div class="calc-mortgage"></div>

JavaScript

$('.slider').each(function() {
    var $el = $(this);
    $el.slider({
        range: "max",
        min: $el.data('min'),
        max: $el.data('max'),
        value: $el.data('value'),
        step: $el.data('step'),
        slide: function(event, ui) {
            $($el.data('target')).html('£' + ui.value);
            
            console.log('A slider was moved!');
        }
    });
});