JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div id="slider-container">
   <div id="debt-slider"></div>
   <input id="debt-txt" type="text" name="debt" value="£1000" />
</div>

CSS

#slider-container {
    margin: 50px;   
    
}

#debt-slider {
	width: 300px;
	height: 5px;
	background: url(http://thestarcrosseddrifter.com/images/slider-bg.png) repeat-x;
	position: relative;
	margin: 35px 0;
	padding: 0 10px;
	border: none;
	border-radius: 0;
	float: left;
}

#slider-container .ui-slider-handle {
	background: url(http://thestarcrosseddrifter.com/images/slider-button.png) no-repeat;
	width: 60px;
	height: 33px;
	position: absolute;
	top: -15px;
	z-index: 200;
	border: none;
}

#slider-container .ui-widget-header {
	background: url(http://thestarcrosseddrifter.com/images/slider-bg.png) repeat-x;
	height: 5px;
	left: 1px;
	top: 1px;
	position: absolute;
}

input#debt-txt {margin-top:25px;margin-left:20px;}

JavaScript

$( "#debt-slider" ).slider({
		animate: true,
		range: "min",
		value: 1000,
		min: 1000,
		max: 10000,
		step: 1,
		
		//this gets a live reading of the value and prints it on the page
		slide: function( event, ui ) {
		 $("#debt-txt").attr('value', ui.value);
		}
    });