jQuery addClass example

Change class name on click in jQuery

by Yunus Gaziev

HTML

<div class="block">
  <div class="block_date">
    <div class="block_date-item">Дата 1</div>
    <div class="block_date-item">Дата 2</div>
    <div class="block_date-item">Дата 3</div>
    <div class="block_date-item">Дата 4</div>
    <div class="block_date-item">Дата 5</div>
    <div class="block_date-item">Дата 6</div>
    <div class="block_date-item">Дата 7</div>
    <div class="block_date-item">Дата 8</div>
    <div class="block_date-item">Дата 9</div>
    <div class="block_date-item">Дата 10</div>
  </div>
  <div class="block_range">
    <div class="block_range-handle"></div>
    <div class="block_range-motion">
      <div class="block_range-motion-trigger" id="block_range-left"></div>
      <div class="block_range-motion-trigger" id="block_range-right"></div>
    </div>
    <div class="block_range-handle"></div>
  </div>
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.block {
  display: flex;
  position: relative;
  height: 48px;
  border-top: 1px solid #c1c7d0;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 90%;
  margin: 0 auto;
}

.block_date {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.block_date-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  width: 110px;
  height: 100%;
  flex-shrink: 0;
  font-size: 13px;
  color: #7A869A;
  z-index: 1;
  cursor: pointer;
}

.block_date-item:hover {
  opacity: 0.7;
}

.block_range {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
}

.block_range-handle {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
  z-index: 5;
}

.block_range-motion {
  position: relative;
  min-width: 110px;
  width: 220px;
  border: 1px solid #ccc;
  flex-shrink: 0;
  overflow: hidden;
}

.block_range-motion-trigger {
  position: absolute;
  top: 12px;
  bottom: 12px;
  border-radius: 100%;
  background: #ccc;
  width: 20px;
  z-index: 5;
  cursor: w-resize;
}

.block_range-motion-trigger:nth-child(1) {
  left: -10px;
}

.block_range-motion-trigger:nth-child(2) {
  right: -10px;
}

JavaScript

var $block = $('.block');
var $eMotion = $('.block_range-motion');
var $rangeLeft = $('#block_range-left');
var $rangeRight = $('#block_range-right');

function motion(direction, control) {
	var $control = $(control);
  var left = $control.position().left;
  var right = $control.position().right;
  
  $block.on('mousemove.range', function(event) {
  	
    if ('left' === direction) {
			console.log('left');
    }
    
    if ('right' === direction) {
			console.log('right');
    }
    /* var motionWidth = event.clientX - $eMotion.offset().left;
    $eMotion.css({
      'width': motionWidth
    }); */
  });
  
  $control.on('mouseup', function() {
  	console.log('asdasd');
    $block.off('mousemove.range');
  });
}

$rangeLeft.on('mousedown', function() {
  motion('left', this);
});

$rangeRight.on('mousedown', function() {
  motion('right', this);
});