Hi Developers all over the world.
I would like to have some help with a simple, pure Javascript (30 lines), JQuery free (and other library's) drag control slider.
I have been searching months and found many scripts but i don't like -Jquery cause most script need 4, 5, 6 javascript includes.. I prefer smaller and basic script.. i like to ajust them like i want and i also can lean alot from smaller scripts.
All i need is a simple slider that i can use for: rescale images, scroll page, change brightness on images (with PHP) etc.
I am new with javascript (2 months), this is how far i get now.. Sorry for the bad variable names...
<script type="text/javascript">
_item = null;
mouse_x = 0;
drag_x = 0;
function move_init() {
document.onmousemove = _move;
document.onmouseup = _stop;
}
function _stop(){
_item = null;
}
function _move(e){
mouse_x = document.all ? window.event.clientX : e.pageX;
if(_item != null){
_item.style.left = (mouse_x - drag_x) + "px";
}
}
function _move_item(drag)
{
_item = drag;
drag_x = mouse_x - _item.offsetLeft;
}
move_init();
drag.onmousedown=_move_item(); // Agh.. did'nt figure out how this works
</script>
<style type="text/css">
#drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
#track{background:red; width:200px;}
</style>
<div id="track"><div id="drag" onmousedown="_move_item(this);" >x</div></div>
i appriciate your help.
I wrote this on 31 december 2012.. So happy new year. Please be good for each other.
Thank you.
This code works in modern browsers. Just create some polyfill for that addEventListener
and this custom range slider will be safe to use:
function rangeSlider(id, onDrag) {
var range = document.getElementById(id),
dragger = range.children[0],
draggerWidth = 10, // width of your dragger
down = false,
rangeWidth, rangeLeft;
dragger.style.width = draggerWidth + 'px';
dragger.style.left = -draggerWidth + 'px';
dragger.style.marginLeft = (draggerWidth / 2) + 'px';
range.addEventListener("mousedown", function(e) {
rangeWidth = this.offsetWidth;
rangeLeft = this.offsetLeft;
down = true;
updateDragger(e);
return false;
});
document.addEventListener("mousemove", function(e) {
updateDragger(e);
});
document.addEventListener("mouseup", function() {
down = false;
});
function updateDragger(e) {
if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
}
}
}
<style>
.range-slider {
width:300px;
height:20px;
margin:0 auto 1em;
position:relative;
cursor:e-resize;
}
.range-slider:before {
content:"";
display:block;
position:absolute;
top:9px;
left:0;
width:100%;
height:2px;
background-color:black;
}
.range-slider span {
display:block;
height:inherit;
position:relative;
z-index:2;
background-color:red;
cursor:inherit;
}
</style>
<div class="range-slider" id="range-slider-1">
<span></span>
</div>
<script>
rangeSlider('range-slider-1', function(value) {
document.getElementById('test-area').innerHTML = value + '%';
});
</script>
Demo: http://jsbin.com/dulifezi/2/edit
I’m creating a repo for this snippet here → https://github.com/taufik-nurrohman/range-slider
Take a look at DragDealer.js: https://skidding.github.io/dragdealer/
There's an example of changing opacity of an image based on the value of a slider here.
Hope this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With