Простой слайдер контроллера перетаскивания на чистом Javascript

Привет, разработчики со всего мира.

Мне нужна помощь с простым, чистым Javascript (30 строк), бесплатным JQuery (и другими библиотеками) ползунком управления перетаскиванием.

Я искал месяцы и нашел много скриптов, но мне не нравится -Jquery, потому что большинству скриптов нужно 4, 5, 6 javascript. Я предпочитаю меньший и базовый скрипт. опираться много от небольших скриптов.

Все, что мне нужно, это простой слайдер, который я могу использовать для: масштабирования изображений, прокрутки страницы, изменения яркости изображений (с PHP) и т. д.

Я новичок в javascript (2 месяца), вот как далеко я продвинулся сейчас.. Извините за неправильные имена переменных...

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

Я ценю вашу помощь.

Я написал это 31 декабря 2012 года. Так что счастливого нового года. Пожалуйста, будьте добры друг к другу.

Спасибо.


javascript slider onmousemove onmousedown
person Stone Pentecost    schedule 30.12.2012    source источник
comment
Привет, @user1938684, если вам нужен обзор кода, разместите его на codereview.stackexchange.com. В противном случае, если у вас есть конкретный вопрос или проблема с этим кодом, не стесняйтесь точно указать, что это такое. Пока неясно, какая именно помощь вам нужна.   -  person kojiro    schedule 31.12.2012
comment
Я буду рад, если у кого-то есть кусок кода для меня. Мой код не вставлен для просмотра... больше для проверки того, что я ищу. пожалуйста, дайте мне код .. тогда я счастлив и продолжу свое развитие.   -  person Stone Pentecost    schedule 31.12.2012
comment
Из любопытства вы нашли код? Ищу такой же, пока безрезультатно.   -  person user1111929    schedule 14.01.2013
comment
Возможный дубликат Есть ли простой слайдер JavaScript?   -  person UnkwnTech    schedule 26.07.2016
comment
Для новых разработчиков, сталкивающихся с этим, используйте диапазон типов ввода, пусть браузер сделает всю работу за вас: <input type="range" name="points" min="0" max="10"> Предварительный просмотр: w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_range   -  person Tofandel    schedule 24.01.2020

Ответы (2)


arrow_upward
26
arrow_downward

Этот код работает в современных браузерах. Просто создайте полифилл для этого addEventListener, и этот настраиваемый ползунок диапазона будет безопасным для использования:

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>

Демонстрация: http://jsbin.com/dulifezi/2/edit

Обновлять

Я создаю репо для этого фрагмента здесь → https://github.com/taufik-nurrohman/range-slider

person Taufik Nurrohman    schedule 31.03.2014
comment
Перетаскивание не работает на сенсорных устройствах. Проверено на планшете Android. - person redburn; 14.12.2014
comment
@redburn Версия репозитория GitHub поддерживает сенсорные события. - person Taufik Nurrohman; 22.07.2016
comment
@TaufikNurrohman есть идеи, как переместить этот код в машинописный (угловой)? - person karlo1zg; 07.09.2017
comment
@ karlo1zg Не угловатый парень, извини. Без понятия. - person Taufik Nurrohman; 07.09.2017

arrow_upward
2
arrow_downward

Взгляните на DragDealer.js: https://skidding.github.io/dragdealer/

Вот пример изменения непрозрачности изображения в зависимости от значения ползунка.

Надеюсь это поможет!

person w3bshark    schedule 24.04.2013