Draggable range slider

draggable-range-slider.markdown

Draggable range slider

Forked from MAW-M.L's Pen Draggable range slider.

Forked from Secret Sam's Pen Draggable range slider.

A Pen by Andrey Shubich on CodePen.

License.

index.html

<h3>A simple range slider with <span class="gsap">GreenSock</span> draggable</span></h3>
<div id="min">Min: 0</div>
<div id="max">Max: 0</div>
<div id="container">
  <div class="knob" id='knob1'></div>
  <div class="knob" id='knob2'></div>
<!--   <div class="range"></div> -->
</div>

script.js

var minrange = 55;
var maxrange = 200;
var min = document.getElementById("min");
var max = document.getElementById("max");

let leftKnob = new Draggable("#knob1", {
  type: "x",
  bounds: "#container",
  onDrag: updateLeft,
  onPress: leftKnobScope,
});

let rightKnob = new Draggable("#knob2", {
  type: "x",
  bounds: "#container",
  onDrag: updateRight,
  onPress: rightKnobScope
});

function updateLeft() {
  min.innerHTML = "Min: " + leftKnob.x;
}

function updateRight() {
  max.innerHTML = "Max: " + rightKnob.x;
}

function leftKnobScope() {
  const { minX } = this;
  this.applyBounds({ minX, maxX: rightKnob.x });
}

function rightKnobScope() {
  const { maxX } = this;
  this.applyBounds({ minX: leftKnob.x, maxX });
}

function updateSlider() {
  TweenLite.set(leftKnob.target, {
    x: minrange,
    onUpdate: leftKnob.update,
    onUpdateScope: leftKnob
  });
  TweenLite.set(rightKnob.target, {
    x: maxrange,
    onUpdate: rightKnob.update,
    onUpdateScope: rightKnob
  });
  min.innerHTML = "Min: " + minrange;
  max.innerHTML = "Max: " + maxrange;
}

updateSlider();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.greensock.com/js/src/utils/Draggable.min.js"></script>
<script src="https://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

style.css

body {
  background-color:white;
  font-family: Signika Negative, Asap, sans-serif;
}
#container {
  box-shadow:inset 0px 0px 10px rgba(0,0,0,1);
  background-color: #444444;
  height:20px; 
  top:50px;
  overflow:visible; 
  padding:0; 
  position:relative;
  width: 400px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
	border-radius: 10px;
}

#knob1 {
  background: green;
}

#knob2 {
  background: red;
}

.knob {
	text-align: center;
	font-family: Asap, Avenir, Arial, sans-serif;
	width: 15px;
	height: 50px;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
	border-radius: 10px;
	line-height: 100px;
	color: black;
	position: absolute;
	top:-17px;
  z-index:2;
  border: 2px solid rgba(0,0,0,0.4);
}

.range {
  background-color:lime;
  height:15px; 
  width: 10px;
  position:relative;
  top : 2px;
  box-shadow:inset 0px 0px 10px black ;
}
.gsap {
  color : green ;
}

.ancient {
  font-size:14px;
  color:#555;
}