JSFiddle - React, Tailwind, and code Playground

by marvinc

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.css">
<div class="container mt-5">
		<div class="row">
			<div class="col-lg-6 mx-auto">Somma: <span id="valore">0</span></div>
		</div>
		<div class="row mt-5">		
			<div class="col-lg-6 mt-5 mx-auto">
			<span>Slider</span>
				<div id="slider"></div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-lg-6 mt-5 mx-auto">
			<span>Slider 1</span>
				<div id="slider1"></div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-lg-6 mt-5 mx-auto">
			<span>Slider 2</span>
				<div id="slider2"></div>
			</div>
		</div>
	</div>

JavaScript

var slider = document.getElementById('slider');
			var slider1 = document.getElementById('slider1');
			var slider2 = document.getElementById('slider2');
			
			noUiSlider.create(slider,{
				start: 60,
				connect: "lower",
				range:
				{
				'min':0,
				'max':100
				},
				step:5,
				tooltips: wNumb({decimals: 0}),
				pips: {
					mode: 'steps',
					density: 3,		
				}
			})
			noUiSlider.create(slider1,{
				start: 30,
				connect: "lower",
				range:
				{
				'min':0,
				'max':100
				},
				step:5,
				tooltips: wNumb({decimals: 0}),
				pips: {
					mode: 'steps',
					density: 3,		
				}
			})
			noUiSlider.create(slider2,{
				start: 10,
				connect: "lower",
				range:
				{
				'min':0,
				'max':100
				},
				step:5,
				tooltips: wNumb({decimals: 0}),
				pips: {
					mode: 'steps',
					density: 3,		
				}
			})