Question

114

Simple pure Javascript drag controller slider

rated 0 times [ 117] [ 3] / answers: 1 / hits: 38329 / 12 Years ago, sun, december 30, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micah

Add To Favorites

Follow

Total Points: 295

Total Questions: 104

Total Answers: 92

Location: Namibia

Member since Mon, Feb 21, 2022

2 Years ago

answered 12 Years ago harleyterryp · Accepted Answer

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));

        }

    }



}

Example Usage

<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

Update

I’m creating a repo for this snippet here → https://github.com/taufik-nurrohman/range-slider