JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" class="smoker_radio" name="smoker" value="0">
<input type="radio" class="smoker_radio" name="smoker" value="1">
<input type="radio" class="smoker_radio" name="smoker" value="2">
<input type="radio" class="smoker_radio" name="smoker" value="3">
<input type="radio" class="smoker_radio" name="smoker" value="4">
<div id="slider" class="slider">
  <div class="slider-thumb"></div>
</div>

Slide:<span id="slide">&nbsp;</span>
Change:<span id="change">&nbsp;</span>

CSS

.slider {
    width: 310px;
    height: 15px;
    margin: 5px;

    border-radius: 5px;
    background: #E0E0E0;
    background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
    background: linear-gradient(left top, #E0E0E0, #EEEEEE);
  }

  .slider-thumb {
    position: relative;
    width: 10px;
    height: 25px;
    left: 10px;
    top: -5px;

    border-radius: 3px;
    background: blue;
    cursor: pointer;
  }

  .sliding .slider-thumb {
    cursor: move;
  }

JavaScript

function addEvent(obj, type, listener) { if(obj.addEventListener) { obj.addEventListener(type, listener, false); return true; } else if(obj.attachEvent) { obj.attachEvent('on' + type, listener); return true; } return false; };
function removeEvent(obj, type, listener) { if(obj.removeEventListener) { obj.removeEventListener(type, listener, false); } else if(obj.detachEvent) { obj.detachEvent('on' + type, listener); } };

function Slider(options) {
  var self = this;

  var elem = options.elem;
  var thumbElem = elem.find('.slider-thumb');

  // [<*>----------------]
  //   |...............|
  // first            last
  var pixelsPerValue = (elem.width() - thumbElem.width()) / options.max;
  var value = options.value || 0;

  // при начале переноса фиксируются
  var thumbCursorShift; // сдвиг курсора относительно бегунка
  var sliderCoords; // и координаты слайдера

/*addEvent(thumbElem,'mousedown',onThumbMouseDown);*/
  thumbElem.on('mousedown', onThumbMouseDown)
    .on('selectstart dragstart', false);

  setSlidingValue(value, true);
 

  function onThumbMouseDown(e) {
    startSlide(e.pageX, e.pageY);
    return false;
  }


  function onDocumentMouseMove(e) { 
    //  вычесть координату родителя, т.к. position: relative
    var newLeft = e.pageX - thumbCursorShift.x - sliderCoords.left;

    // курсор ушёл вне слайдера
    if (newLeft < 0) {
      newLeft = 0;
    }

    var rightEdge = elem.outerWidth() - thumbElem.outerWidth();
    if (newLeft > rightEdge) {
      newLeft = rightEdge;
    }

    setSlidingValue( Math.round( newLeft / pixelsPerValue) );    
  }

  function onDocumentMouseUp() {
    endSlide();
  }

  function endSlide() {
    $(document).off('.slider');
    $(self).triggerHandler({
        type: "change", 
        value: value
    });

    elem.removeClass('sliding');
  }
    
  function startSlide(downPageX, downPageY) {
    var thumbCoords = thumbElem.offset();
    thumbCursorShift = { 
      x: downPageX - thumbCoords.left,
      y:...