JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="slider"></div>
<button id="add">Add</button><input id="newValue" type="text" value="6"></input><br />
<button id="remove">Remove</button>

CSS

#slider { margin: 100px; background: hotpink; }

JavaScript

(function ($) {
	$.widget('my-namespace.customSlider', $.ui.slider, {

	addValue: function( val ) {		
		//You would need to add code to test that it's not in the list		
		this.options.values.push( parseInt(val, 10) );
		this._refresh(); 
	},
		
	removeValue: function( ) {
		this.options.values.pop( );
		this._refresh();
	}
});
})(jQuery);
	
$(function () {
	var handlers = [0, 2, 4 , 9, 12],		
		minMoveValue = 0,
		maxMoveValue = Infinity;
	$("#slider").customSlider({
		min: 0,
		max: 12,
		values: handlers,
	   start: function(evt, ui) {		   
			var allValues = $('#slider').customSlider('option', 'values');
			maxMoveValue = allValues.reduce(function(prev, current){
				return (current > ui.value && current < prev) ? current : prev;
			}, Infinity);
			
			minMoveValue = allValues.reduce(function(prev, current){
				return (current < ui.value && current > prev) ? current : prev;
			}, 0);
			
	  
		},
		slide: function (evt, ui) {
			return ui.value > minMoveValue && ui.value < maxMoveValue;
		}
	});
	
	$('#add').click(function(){
		$("#slider").customSlider('addValue', $('#newValue').val());
	});
	
	$('#remove').click(function(){
		$("#slider").customSlider('removeValue');
	});
	
});