Skip to content

Instantly share code, notes, and snippets.

@rishabhfitkids

rishabhfitkids/index.html

Created July 27, 2018 03:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rishabhfitkids/91049a6ad7c36cec258df5a7a3eb5e0a to your computer and use it in GitHub Desktop.
Save rishabhfitkids/91049a6ad7c36cec258df5a7a3eb5e0a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/cenoculuja
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.sliderWrapper{
position:relative;
width:250px;
height:100px;
border:1px solid gray;
}
.filled{
height:15px;
background:gray;
width:50%;
margin-top:40px;
display:inline-block;
border:1px solid gray;
box-sizing:border-box;
}
.empty{
height:15px;
border:1px solid gray;
width:50%;
margin-top:40px;
display:inline-block;
box-sizing:border-box;
}
.slider{
height:30px;
width:10px;
position:absolute;
background:gray;
top:31%;
left:50%;
}
</style>
</head>
<body>
<div class="sliderWrapper">
<div class="filled"></div><div class="empty"></div>
<div class="slider"></div>
</div>
<script id="jsbin-javascript">
dragElement(document.querySelector(".slider"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
document.querySelector(".filled").style.width= pos3-10+'px';
document.querySelector(".empty").style.width= (250-pos3+10)+'px';
pos3 = e.clientX;
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<script id="jsbin-source-css" type="text/css">.sliderWrapper{
position:relative;
width:250px;
height:100px;
border:1px solid gray;
}
.filled{
height:15px;
background:gray;
width:50%;
margin-top:40px;
display:inline-block;
border:1px solid gray;
box-sizing:border-box;
}
.empty{
height:15px;
border:1px solid gray;
width:50%;
margin-top:40px;
display:inline-block;
box-sizing:border-box;
}
.slider{
height:30px;
width:10px;
position:absolute;
background:gray;
top:31%;
left:50%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">dragElement(document.querySelector(".slider"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
document.querySelector(".filled").style.width= pos3-10+'px';
document.querySelector(".empty").style.width= (250-pos3+10)+'px';
pos3 = e.clientX;
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}</script></body>
</html>
Raw
jsbin.cenoculuja.css
.sliderWrapper{
position:relative;
width:250px;
height:100px;
border:1px solid gray;
}
.filled{
height:15px;
background:gray;
width:50%;
margin-top:40px;
display:inline-block;
border:1px solid gray;
box-sizing:border-box;
}
.empty{
height:15px;
border:1px solid gray;
width:50%;
margin-top:40px;
display:inline-block;
box-sizing:border-box;
}
.slider{
height:30px;
width:10px;
position:absolute;
background:gray;
top:31%;
left:50%;
}
Raw
jsbin.cenoculuja.js
dragElement(document.querySelector(".slider"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
document.querySelector(".filled").style.width= pos3-10+'px';
document.querySelector(".empty").style.width= (250-pos3+10)+'px';
pos3 = e.clientX;
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment