Проверка позиции ползунка у UI Slider

217

13 апреля 2017, 17:57

У меня реализован ползунок цены (http://api.jqueryui.com/slider/) с двумя значениями (мин и макс). Мне нужно проверять, поменялись ли значения у него и если да - добавлять класс .custom родителю (.main-box) и как только значения вернулись в исходную позицию - удалять класс .custom у .main-box.

Вот мой код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="main-box"> 
  <div> 
    <input type="text" name="price" id="price"> 
    <div> 
      <input type="text" name="price2" id="price2"> 
    </div> 
    <div id="slider_price"></div> 
  </div> 
 
  <script> 
    $("#slider_price").slider({ 
      range: true, 
      //orientation: "vertical",  
      min: 100, 
      step: 3, 
      max: 700, 
      values: [100, 700], 
      slide: function(event, ui) { 
        //$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
        $('#price').val(ui.values[0]); 
        $('#price2').val(ui.values[1]); 
      } 
    }); 
  </script>

Скажите пожалуйста, как это реализовать?

Answer 1

Смотрите в сторону событий, тут вероятно подойдет stop

Пример на jsfiddle

<style>.custom input{font-weight:bold; color:red; border-radius:5px}</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="main-box"> 
  <div> 
    <input type="text" name="price" id="price"> 
    <div> 
      <input type="text" name="price2" id="price2"> 
    </div> 
    <div id="slider_price"></div> 
  </div> 
 
  <script> 
    $("#slider_price").slider({ 
      range: true, 
      //orientation: "vertical",  
      min: 100, 
      step: 3, 
      max: 700, 
      values: [100, 700], 
      slide: function(event, ui) { 
        //$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
        $('#price').val(ui.values[0]); 
        $('#price2').val(ui.values[1]); 
      }, 
  stop: function(event, ui) { 
    //$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
    var min = $("#slider_price").slider("option", "min"); 
    var max = $("#slider_price").slider("option", "max"); 
    if(ui.values[0]==min && ui.values[1]==max){ 
    $('.main-box').removeClass('custom'); 
    } else { 
    $('.main-box').addClass('custom'); 
    } 
  } 
    }); 
  </script>