Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
​
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    
    <div class="form-row">
                  <div class="filter__slider">
                    <div class="filter__slider-display">
                      <div class="filter__slider-left">
                        <span class="filter__slider-text">from</span>
                        <input type="text" name="slider" class="filter__slider-input filter__slider-input-from" >
                      </div>
                      <div class="filter__slider-right">
                        <span class="filter__slider-text">to</span>
                        <input type="text" name="slider" class="filter__slider-input filter__slider-input-to">
                      </div>
                      <div>
                        Difference
                        <span class="filter__slider-differ"></span>
                      </div>
                    </div>
                    <br />
                    <div class="filter__slider-element" data-min="0" data-max="300"></div>
                  </div>
                </div>
                
                <div class="form-row">
                  <div class="filter__slider">
                    <div class="filter__slider-display">
                      <div class="filter__slider-left">
                        <span class="filter__slider-text">from</span>
                        <input type="text" name="slider" class="filter__slider-input filter__slider-input-from" >
                      </div>
                      <div class="filter__slider-right">
                        <span class="filter__slider-text">to</span>
                        <input type="text" name="slider" class="filter__slider-input filter__slider-input-to">
                      </div>
                      <div>
                        Difference
                        <span class="filter__slider-differ"></span>
                      </div>
                    </div>
                    <br />
                    <div class="filter__slider-element" data-min="0" data-max="100"></div>
                  </div>
                </div>
  </div>
</body>
</html>
 
$('.filter__slider-element').each(function(){
  var $this = $(this),
      container = $this.closest('.filter__slider'),
      min = parseInt($this.data('min')),
      max = parseInt($this.data('max')),
      from = container.find('.filter__slider-input-from'),
      to = container.find('.filter__slider-input-to'),
      difference = container.find('.filter__slider-differ');
​
  
​
  from.change(function(){      
    $('.filter__slider-element').slider('values', 0, from.val());
  });
​
  to.change(function(){
    $('.filter__slider-element').slider('values', 1, to.val());
  });
​
  $this.slider({
    range: true,
    min : min,
    max: max,
    values: [min, max],
    change: function(event, ui) {
      difference.text(ui.values[1] - ui.values[0]);
    },
    slide: function(event, ui){
      from.val(ui.values[0]);
      to.val(ui.values[1]);
      difference.text(ui.values[1] - ui.values[0]);
    },
    create: function(event, ui){
      var values = $(this).slider('option', 'values');
      from.val(values[0]);
      to.val(values[1]);
      difference.text(values[1] - values[0]);
    }
  });  
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers