How to draggable element in div

Question

I have a group HTML element and they are in draggable div element. So I have a range HTML element. When I want to move range, all line is dragging. I set draggable="false" of range element, but it does not work. (I tested in chrome browser)

.draggable {
  width: 400px;
  height: 400px;
}

<div draggable="true" class="draggable">
  <input type="checkbox" />
  <label>This is line</label>
  <input type="range" min="0" max="100" />
</div>

Answer 1

Disable/Enable "draggable" on mousedown and mouseup.

document.querySelector('input[type="range"]').addEventListener('mousedown', (event) => {	
  setDraggable(event.target.parentNode, false);
});

document.querySelector('input[type="range"]').addEventListener('mouseup', (event) => {	
  setDraggable(event.target.parentNode, true);
});

const setDraggable = (e, val) => {
	if (e.parentNode) {
    setDraggable(e.parentNode, val);
  }
  
  e.draggable = val;
}

.draggable{
  width:400px;
  height:400px;
}

<div draggable="true">
  <div class="draggable" draggable="true">
    <input type="checkbox" />
    <label>This is line</label>
    <input type="range" min="0" max="100" id="rangeInput" />
  </div>
</div>

Answer 2

You could disable the drag when the user clicks on the range and enable it after.

input.addEventListener('mousedown', e => {
    e.target.parentNode.draggable = false;
});
input.addEventListener('mouseup', e => {
    e.target.parentNode.draggable = true;
});

demo