Привязать инпут к ползунку slider-range

129
17 ноября 2018, 22:20

как сделать, чтобы каждый инпут был над своим ползунком и перемещался вместе с ним?

$("#slider-range").slider({ 
  range: true, 
  min: 0, 
  max: 3000, 
  values: [75, 2500], 
  slide: function(event, ui) { 
    $("#min").val(ui.values[0] + " руб."); 
    $("#max").val(ui.values[1] + " руб."); 
  } 
}); 
$("#min").val($("#slider-range").slider("values", 0) + " руб."); 
$("#max").val($("#slider-range").slider("values", 1) + " руб.");
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css"> 
<div id="slider-range"></div> 
<input type="text" id="min" readonly> 
<input type="text" id="max" readonly>

Answer 1

Для этого необходимо в функции slide(event, ui) изменять стили инпутов в зависимости от того что тянется, например изменять отступ в зависимости от положения слайдера.

    $( "#slider-range" ).slider({ 
          range: true, 
          min: 0, 
          max: 3000, 
          values: [ 75, 2500 ], 
          slide: function( event, ui ) { 
            $( "#min" ).val(ui.values[ 0 ] + " руб.");           
            $( "#max" ).val( ui.values[ 1 ] + " руб." ); 
          // set style based on touched rangeslider handle 
          if (ui.values.indexOf(ui.value) === 0) { 
            $( "#min" ).css({ 
              'left': ui.handle.style.left, 
              'z-index': 1, 
            }); 
            $( "#max" ).css({ 
              'z-index': 0, 
            }); 
          } 
          if (ui.values.indexOf(ui.value) === 1) { 
            $( "#max" ).css({ 
              'left': ui.handle.style.left, 
              'z-index': 0, 
            }); 
            $( "#min" ).css({ 
              'z-index': 0, 
            }); 
          }  
          }, 
          stop: function( event, ui ) { 
            $( "#min" ).val(ui.values[ 0 ] + " руб.");           
            $( "#max" ).val( ui.values[ 1 ] + " руб." ); 
          // set style based on touched rangeslider handle 
          if (ui.values.indexOf(ui.value) === 0) { 
            $( "#min" ).css({ 
              'left': ui.handle.style.left, 
              'z-index': 1, 
            }); 
            $( "#max" ).css({ 
              'z-index': 0, 
            }); 
          } 
          if (ui.values.indexOf(ui.value) === 1) { 
            $( "#max" ).css({ 
              'left': ui.handle.style.left, 
              'z-index': 0, 
            }); 
            $( "#min" ).css({ 
              'z-index': 0, 
            }); 
          }  
          } 
        }); 
        $( "#min" ).val($( "#slider-range" ).slider( "values", 0 ) + " руб."); 
       	$( "#max" ).val($( "#slider-range" ).slider( "values", 1 )  + " руб.");
    #min, #max { 
      position: absolute; 
      display: block; 
    } 
    #min { 
      left: 4%; 
    } 
    #max { 
      left: 82.5% 
    }
  
 
       
     
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
            <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> 
            <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css"> 
            <div id="slider-range"></div> 
        						  	 <input type="text" id="min" readonly > 
        						  	 <input type="text" id="max" readonly >

READ ALSO
Как загрузить фото в Selenium WebDriver

Как загрузить фото в Selenium WebDriver

Пытаюсь загрузить изображение на сайт с помощью:

130
Mysql спасет ли партицирование от нехватки ram

Mysql спасет ли партицирование от нехватки ram

есть сервер mysql 56 с таблицами innodb, есть таблица с полнотекстовым индексом и обемом 1гб

139
mysql хитро перезаписать базу

mysql хитро перезаписать базу

так немного предыстории: Работал сайт, с него снят бекапНа бекапе были произведены доработки и настройки

160
перестал загружаться MySQL Workbench

перестал загружаться MySQL Workbench

На linux mint 183 установлен MySQL Workbench, все работало нормально, но внезапно перестал загружаться

191