Slider prompt

gistfile1.txt

I need JavaScript to make the following HTML and CSS interactive:

HTML:
<!-- Slider container -->
<div class="slider-container">
  <!-- Left handle -->
  <div class="handle left-handle"></div>
  <!-- Right handle -->
  <div class="handle right-handle"></div>
  <!-- Slider track -->
  <div class="slider-track"></div>
</div>

CSS:
/* Slider container */
.slider-container {
  position: relative;
  width: 50%;
  height: 10px;
  margin: auto;
}

/* Handle */
.handle {
  z-index: 1;
}

/* Left handle */
.left-handle {
  position: absolute;
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 10px;
  cursor: pointer;
}

/* Right handle */
.right-handle {
  position: absolute;
  right: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 10px;
  cursor: pointer;
}

/* Slider track */
.slider-track {
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 3px;
  background-color: #f0f0f0;
}

Instructions for JS:
The user can clicking and drag each handle to move it left or right along the slider track. There are equally-spaced stopping points along the slider track ranging from 0 through 10. Each handle should snap along each of those points as the user drags it along the track. When the user releases the mouse button, it should console log the position of both handles on a scale from 0 to 10. Moving one handle should not move the other. Both handles must remain within the slider track's range. The two handles cannot cross each other.