JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<div class="slider"></div>
<br>
<button>Click it!</button>

CSS

body {
  margin-top: 80px;
}
.slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{
  height: 3px;
}

.ui-slider .ui-slider-handle {
  width: 14px;
  height: 14px;
  border-radius: 10px;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -7px;
    margin-left: -7px;
}

JavaScript

function createSlider(tooltip, values) {
   $(".slider").slider({
          min: 0,
          max: 100,
          steps: 1,
          values: values,
          slide: function(event, ui) {     
            $(this).find('.ui-state-active div').text(ui.value);
          },
          change: function(event, ui) {}
          
        }).find(".ui-slider-handle").append(tooltip).hover(function() {
          $(".ui-slider-handle").find('div').hide()
          $(this).find('div').show();      
        });
}

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 23;

$('button').on('click', function(e) {

    e.preventDefault();

    //
    // preserve tooltip
    //
    tooltip = $('#tooltip').clone();
    $(".slider").slider("destroy");
		if(values.length <= 4)
    	values.push(val);
    values = values.sort();

    createSlider(tooltip, values);
})


createSlider(tooltip, values);

$(document).on('dblclick', '.ui-slider-handle', function() {
    if ($('.ui-slider-handle').length > 2)
        $(this).remove();
    //alert($(this)[0].style.left);
})