JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.js"></script>

<div class="container">
    <div id="sliderUnder" class="bra-slider"></div>
    <div id="sliderOver" class="bra-slider"></div>
</div>

CSS

.container {
    width:60%;
    margin: 0 auto;
    display:block;   
    margin-top: 100px;
}

.bra-slider {
    margin-bottom: 80px;
    
}

JavaScript

var cupOffset = {
	min: 12,
    max: 40
}

var underRange = {
	min: 63,
    max: 102,
    start: 75
}

var overRange = {
	min: underRange.min+cupOffset.min,
    max: underRange.max+cupOffset.max,
    start: ((underRange.start+cupOffset.min)+(underRange.start + cupOffset.max))/2,
    limitMin: underRange.start + cupOffset.min,
    limitMax: underRange.start + cupOffset.max
}


var $sliderUnder = document.getElementById('sliderUnder');
noUiSlider.create($sliderUnder, {
    step: 1,
	start: underRange.start,
	range: {
		min: underRange.min,
		max: underRange.max
	}
    ,pips: {
		mode: 'range',
		density: 5
	}
});

$sliderUnder.noUiSlider.on('change', function( values, handle ) {
    var iVal = Math.round(values[handle]);
    
    overRange.limitMin = iVal + cupOffset.min;
    overRange.limitMax = iVal + cupOffset.max;
    
	updateVisualLimit();
    updateCupSliderPosition($sliderOver.noUiSlider.get());
});



var $sliderOver = document.getElementById('sliderOver');
noUiSlider.create($sliderOver, {
    step: 1,
	start: overRange.start,
	range: {
		min: overRange.min,
		max: overRange.max
	}
    ,pips: {
		mode: 'range',
		density: 5
	}
});
addVisualLimit();

$sliderOver.noUiSlider.on('change', function ( values, handle ) {
    updateCupSliderPosition(values[handle]);
});

function updateCupSliderPosition(val) {
	if ( val < overRange.limitMin ) {
		$sliderOver.noUiSlider.set(overRange.limitMin);
	} else if ( val > overRange.limitMax ) {
		$sliderOver.noUiSlider.set(overRange.limitMax);
	}
}


function addVisualLimit() {
    // Add visual limit element

    var left = percentage(overRange.limitMin, overRange.min, overRange.max);
    var width = ( (overRange.limitMax-overRange.limitMin)/(overRange.max-overRange.min) ) * 100;

    $("<div>", {
        'id': "limitMask",
        css: {
            'transition': 'left 300ms', // css of the noUiSlider uses also 0.3s
            'position': 'absolute',
            'top': '0',
            'left': left+'%',
           ...