JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
	<div id="background" style="background:green;">
		<div style="left:0"></div>
		<div style="left:16.666%"></div>
		<div style="left:33.333%"></div>
		<div style="left:50%"></div>
		<div style="left:66.667%"></div>
		<div style="left:83.333%"></div>
		<div style="left:100%"></div>
	</div>

    <div id="target"></div>

CSS

body {
		position: relative;
	}
	
	#background,
	#target {
		position: absolute;
		width: 750px;
		height: 50px;
		left: 50px;
		top: 50px;
	}
	
	#background > div {
		width: 50px;
		height: 50px;
		background: blue;
		position: absolute;
	}
	
	.noUi-state-EXAMPLE .noUi-origin {
		-webkit-transition: left 0.3s, top 0.3s;
		transition: left 0.3s, top 0.3s;
	}


	.noUi-target * {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
		box-sizing: border-box;
-webkit-touch-callout: none;
    -ms-touch-action: none;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
		cursor: default;
	}
	.noUi-base {
		width: 100%;
		height: 50px;
		position: relative;
		max-width: 100%;
		max-height: 100%;
		z-index: 1;
	}
	.noUi-handle {
		background: #EEE;
		height: 50px;
		width: 50px;
		margin: 0;
	}
	.noUi-origin {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 0;
	}
	.noUi-z-index {
		z-index: 10;
	}
	.noUi-state-tap .noUi-origin {
		-webkit-transition: left 0.3s, top 0.3s;
		transition: left 0.3s, top 0.3s;
	}

JavaScript

$('#background').click(function(){
		$('#target').addClass('noUi-state-EXAMPLE').val(7);
		setTimeout(function(){
			$('#target').removeClass('noUi-state-EXAMPLE');
		}, 300);
	});
	
	$('#target').noUiSlider({
		 start: 1
		,range: [1,7]
		,handles: 1
		,step: 1
		,serialization: {
			to: [false, false],
			resolution: 1
		}
	});