JSFiddle - React, Tailwind, and code Playground

by miiauwz

JavaScript

$( document ).ready(function() {
var gewichtslider = document.getElementById('slider_gewicht');

noUiSlider.create(gewichtslider, {
	start: [ 45 ],
	connect: 'lower',
	step: 1,
	range: {
		'min': 20,
		'max': 140
	}
});
	});
$( document ).ready(function() {
	var gewichtslider = document.getElementById('slider_gewicht');
var tipHandles = gewichtslider.getElementsByClassName('noUi-handle'),
	tooltips = [];

// Add divs to the slider handles.
for ( var i = 0; i < tipHandles.length; i++ ){
	tooltips[i] = document.createElement('div');
	tooltips[i].setAttribute('class', 'tooltipdiv');
	tipHandles[i].appendChild(tooltips[i]);
}

// When the slider changes, write the value to the tooltips.
gewichtslider.noUiSlider.on('update', function( values, handle, unencoded ){
	tooltips[handle].innerHTML = values[handle];
});
	});



$( document ).ready(function() {
	var gewichtslider = document.getElementById('slider_gewicht');
gewichtslider.noUiSlider.on('change', function ( values, handle, unencoded ) {
	if ( values[handle] < 45 ) {
		gewichtslider.noUiSlider.set(45);
	} else if ( values[handle] > 120 ) {
		gewichtslider.noUiSlider.set(120);
	}
});
	});