Draggable CSS Тумблер

Question

У меня есть следующий CSS тумблер, который я получил где-то в Интернете.

Он работает, но не перетаскивается. Когда вы перетаскиваете ручку с любой стороны, ручка увеличивается, но не перемещается в указанном направлении. Единственный способ изменить значение - нажать на другое место. Но мне нужна операция перетаскивания, если она достаточно продвинута, чтобы также изменить значение. После определенного количества перетаскивания переключатель должен щелкнуть. Возможно ли это?

/* SWITCH */
.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
} 

.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }

.form-switch input { display: none; }

.form-switch input:checked + i { background-color: #4BD763; }

.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }

.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<label class="form-switch">
  <input type="checkbox">
  <i></i>
  Select Me
</label>

Answer 1

Вы уже используете JQuery, поэтому просто установите поведение CSS с помощью *.draggable*

 $(".victim").draggable({
      //css animation here
 });

Также установите для класса victim значение *input*