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.
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.
<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> |
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(); |
<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> |
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; | |
} |