JSFiddle - React, Tailwind, and code Playground

by cormip

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<div id="slider1"></div>
<div id="slider2"></div>
<p align="center"><button id="button">Switch Sliders</button></p>

CSS

#slider1 {
    width: 250px;
    margin: 100px auto;
}

#slider2 {
    width: 250px;
    margin: 100px auto;
}

JavaScript

function filterPips(value, type) {
    if (type===1) return 1
    if (value > 1) {
    	return value % 10 ? -1 : 2;
    }   
}

var topSlider = 1
var slider1 = document.getElementById('slider1');
var slider2 = document.getElementById('slider2');
var getOptions = function(v) {
	var max = 100, 
  		step = 1, 
      start = 50, 
      suffix = "%", 
      decimals = 0
  
  if (v===1) {
    max = 1
    step = 0.01
    start = 0.5
    suffix = ""
    decimals = 1
  }
  var options = {
		range: {
			'min': [0],
			'max': [max]
		},
		start: 0,
		step: step,
		tooltips: {
			to: function (i) {
				return i + suffix
			}
		},
    pips: {
        mode: 'steps',
        density: 3,
        filter: filterPips,
        format: wNumb({
            decimals: decimals,
            suffix: suffix
        })
    }
 }
 return options	
}
//Init sliders
var options1 = getOptions(1)
noUiSlider.create(slider1, options1);
var options2 = getOptions(2)
noUiSlider.create(slider2, options2);

document.getElementById('button').onclick = function(event) {
	var newOptions1, newOptions2
  if (topSlider===1) {
  	newOptions1 = getOptions(2)
    newOptions2 = getOptions(1)
    topSlider=2
  } else {
  	newOptions1 = getOptions(1)
    newOptions2 = getOptions(2)
    topSlider=1
  }
  slider1.noUiSlider.updateOptions(newOptions1)
  slider2.noUiSlider.updateOptions(newOptions2)
}