noUiSlider with wNumb formattting

by Bhumika107

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.js"></script>
<script src="https://googledrive.com/host/0BwvP2oHETUtPNkNSUXZ3dFpXcGs/wNumb.js"></script>
<div id="slider"></div>
<div style="margin-top: 20px">
    <span id="lower-value"></span>
    <span id="upper-value"></span>
</div>

<form>
<input type="text" id="spcl" />
<input type="submit" value="btn">
</form>

CSS

body {
    padding: 1em;
}

JavaScript

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [80, 3000],
	connect: true,
	range: {
		'min': 0,
        '1%': [ 1, 1 ],
		'max': 5000
	},
        format: wNumb({
        decimals: 0,
        thousand: '.',
        postfix: ' (US $)',
    })
});

function leftValue ( handle ) {
	return handle.parentElement.style.left;
}

var lowerValue = document.getElementById('lower-value'),
	upperValue = document.getElementById('upper-value'),
	handles = slider.getElementsByClassName('noUi-handle');

// Display the slider value and how far the handle moved
// from the left edge of the slider.
slider.noUiSlider.on('update', function ( values, handle ) {
	if ( !handle ) {
		lowerValue.innerHTML = + values[handle] + ' € - ';
	} else {
		upperValue.innerHTML = values[handle] + ' €';
	}
  $("#spcl").val(values[handle]).attr("actual",parseFloat(values[handle]).toString().replace('.',''));
  console.log( parseFloat(values[handle]), parseFloat(values[handle]).toString().replace('.','') );
});

$("form").on("submit",function() {
	$("#spcl").val($("#spcl").attr("actual"));
  console.info($('form').serializeArray())
})