JSFiddle - React, Tailwind, and code Playground

slider moves from highest price to lowest price and slider's handle should pop on top along with the handle

by Akram kamal

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="wbpriceslider"></div>

CSS

#wbpriceslider {
    width: 200px;
    height: 10px;
    margin-top: 2em;
    background: cyan;
}
.ui-slider-handle span {
    position: relative;
    top: -1.5em;
    background: red;
}
.ui-slider-handle div {
    position: relative;
    bottom: -0.5em;
    background: red;
}

JavaScript

$(function() {
 $('#wbpriceslider').slider({
        range: 'min',
        min: 0,
		animate:7500,
        max: 10,
        step: 1,
        create: function(event, ui) {
				$('.ui-slider-handle', this).append(
                '<span class="quantity"></span>', 
				'<div class="quantity"></div>');
  },
  slide: updateHandle // Update on slide
  }).slider('value',10);
  updateHandle(null, {handle: $('#wbpriceslider .ui-slider-handle'), // Update on load
  value: 10 });
  function updateHandle(event, ui){
		$('span', ui.handle).text('$10');
		$('div', ui.handle).text('qty');
  }
});