range slide (min&max)

test version jquery range slider

by slawe

HTML

<div class="rangeslider price">
  <input class="min" name="range_1" type="range" min="1" max="100" value="10" />
  <input class="max" name="range_1" type="range" min="1" max="100" value="90" />
  <span class="range_min light left">10</span>
  <span class="range_max light right">90</span>
</div>

<div class="rangeslider rang">
  <input class="min" name="range_1" type="range" min="1" max="100" value="10" />
  <input class="max" name="range_1" type="range" min="1" max="100" value="90" />
  <span class="range_min light left">10</span>
  <span class="range_max light right">90</span>
</div>

<a id="btn" href="#">click</a>

CSS

body{
  font-family: sans-serif;
  font-size:14px;
  background: #354655;
}
#btn{
  position: absolute;
  display: block;
  margin-top: 70px;
  color: yellowgreen;
}
input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
    background: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 1px;
  background: #ececec;
}

input[type='range']:nth-child(2)::-webkit-slider-runnable-track{
  background: none;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #ececec;
  border: 1px solid #ececec;
  border-radius: 25px;
  z-index: 1;
}


input[type='range']:nth-child(1)::-webkit-slider-thumb{
  z-index: 2;
}

.rangeslider{
    position: relative;
    height: 60px;
    width: 210px;
    display: block;
    margin-top: -5px;
    margin-left: 20px;
}
.rangeslider input{
    position: absolute;
}


.rangeslider span{
    position: absolute;
    margin-top: 30px;
    left: 0;
    color: #ececec;
}

.rangeslider .right{
   position: relative;
   float: right;
   margin-right: -5px;
}


/* Proof of concept for Firefox */
@-moz-document url-prefix() {
  .rangeslider::before{
    content:'';
    width:100%;
    height:2px;
    background: #ececec;
    display:block;
    position: relative;
    top:16px;
  }

  input[type='range']:nth-child(1){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }

  input[type='range']:nth-child(2){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }
input[type='range']::-moz-range-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 25px;
  z-index:...

JavaScript

var skills = {price: {}, rang: {}};

$('input[type="range"]').on( 'input', rangeInputChangeEventHandler);

$('#btn').on('click', function(e) {
	e.preventDefault();
  console.log(skills); 
});

function rangeInputChangeEventHandler(e){
  var rangeGroup = $(this).attr('name'),
      minBtn = $(this).parent().children('.min'),
      maxBtn = $(this).parent().children('.max'),
      range_min = $(this).parent().children('.range_min'),
      range_max = $(this).parent().children('.range_max'),
      minVal = parseInt($(minBtn).val()),
      maxVal = parseInt($(maxBtn).val()),
      origin = e.originalEvent.target.className,
      container = $(this).parent().attr('class').split(' ').pop();

  if(origin === 'min' && minVal >= maxVal){
    $(minBtn).val(maxVal);
  }
  var minVal = parseInt($(minBtn).val());
  $(range_min).html(minVal);


  if(origin === 'max' && maxVal <= minVal){
    $(maxBtn).val(minVal);
  }
  var maxVal = parseInt($(maxBtn).val());
  $(range_max).html(maxVal);

  skills[container] = {min: minVal, max: maxVal};
  console.log(skills);
}