Membuat Input Range Slider dengan Value Bubbles menggunakan Jquery

Membuat Input Range Slider dengan Value Bubbles menggunakan Jquery - kali ini saya akan membagikan cara untuk membuat slider range menggunakan HTML 5 dan JQuery. Kenapa menggunakan jquery ? karena jika  hanya menggunakan HTML 5 tampilan slider input range akan apa adanya, jika menggunakan jquery dan sedikit sentuhan CSS, slider input range akan jauh lebih menarik, pada silder input range akan muncul value bubbles. untuk lebih jelas nya bisa di lihat contoh nya  di bawah ini .

Untuk Code nya adalah berikut ini :

Script Reference :

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>

HTML :

<div class="range-field">
<input id="test5" max="100" min="0" type="range" />
</div>

CSS

<style>
.range-field {
  position: relative;
}
input[type=range],
input[type=range] + .thumb {
  cursor: pointer;
}
input[type=range] {
  position: relative;
  background-color: transparent;
  border: none;
  outline: none;
  width: 600px;
  margin: 15px 0;
  padding: 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range] + .thumb {
  position: absolute;
  border: none;
  height: 0;
  width: 0;
  border-radius: 50%;
  background-color: #26a69a;
  top: 10px;
  margin-left: -6px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
input[type=range] + .thumb .value {
  display: block;
  width: 30px;
  text-align: center;
  color: #26a69a;
  font-size: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
input[type=range] + .thumb.active {
  border-radius: 50% 50% 50% 0;
}
input[type=range] + .thumb.active .value {
  color: #fff;
  margin-left: -1px;
  margin-top: 8px;
  font-size: 10px;
}
input[type=range] {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background: #c2c0c2;
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: #26a69a;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  margin: -5px 0 0 0;
  transition: .3s;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}
input[type=range] {
  /* fix for FF unable to apply focus style bug  */
  border: 1px solid white;
  /*required for proper track sizing in FF*/
}
input[type=range]::-moz-range-track {
  height: 3px;
  background: #ddd;
  border: none;
}
input[type=range]::-moz-range-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #26a69a;
  margin-top: -5px;
}
input[type=range]:-moz-focusring {
  outline: 1px solid #fff;
  outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
  background: #ccc;
}
input[type=range]::-ms-track {
  height: 3px;
  background: transparent;
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #777;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #26a69a;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}
</style>

JQUERY :

<script>

 var range_type = 'input[type=range]';
            var range_mousedown = false;
            var left;
            $(range_type).each(function () {
              var thumb = $('<span class="thumb"><span class="value"></span></span>');
              $(this).after(thumb);
            });
            var range_wrapper = '.range-field';
            $(document).on('change', range_type, function(e) {
              var thumb = $(this).siblings('.thumb');
              thumb.find('.value').html($(this).val());
            });
            $(document).on('input mousedown touchstart', range_type, function(e) {
              var thumb = $(this).siblings('.thumb');
              var width = $(this).outerWidth();
              // If thumb indicator does not exist yet, create it
              if (thumb.length <= 0) {
             thumb = $('<span class="thumb"><span class="value"></span></span>');
             $(this).after(thumb);
              }
              // Set indicator value
              thumb.find('.value').html($(this).val());
              range_mousedown = true;
              $(this).addClass('active');
              if (!thumb.hasClass('active')) {
             thumb.velocity({ height: "30px", width: "30px", top: "-20px", marginLeft: "-15px"}, { duration: 300, easing: 'easeOutExpo' });
              }
              if (e.type !== 'input') {
             if(e.pageX === undefined || e.pageX === null){//mobile
                left = e.originalEvent.touches[0].pageX - $(this).offset().left;
             }
             else{ // desktop
                left = e.pageX - $(this).offset().left;
             }
             if (left < 0) {
               left = 0;
             }
             else if (left > width) {
               left = width;
             }
             thumb.addClass('active').css('left', left);
              }
              thumb.find('.value').html($(this).val());
            });
            $(document).on('mouseup touchend', range_wrapper, function() {
              range_mousedown = false;
              $(this).removeClass('active');
            });
            $(document).on('mousemove touchmove', range_wrapper, function(e) {
              var thumb = $(this).children('.thumb');
              var left;
              if (range_mousedown) {
             if (!thumb.hasClass('active')) {
               thumb.velocity({ height: '30px', width: '30px', top: '-20px', marginLeft: '-15px'}, { duration: 300, easing: 'easeOutExpo' });
             }
             if (e.pageX === undefined || e.pageX === null) { //mobile
               left = e.originalEvent.touches[0].pageX - $(this).offset().left;
             }
             else{ // desktop
               left = e.pageX - $(this).offset().left;
             }
             var width = $(this).outerWidth();
             if (left < 0) {
               left = 0;
             }
             else if (left > width) {
               left = width;
             }
             thumb.addClass('active').css('left', left);
             thumb.find('.value').html(thumb.siblings(range_type).val());
              }
            });
       $(document).on('mouseout touchleave', range_wrapper, function() {
              if (!range_mousedown) {
             var thumb = $(this).children('.thumb');
             if (thumb.hasClass('active')) {
               thumb.velocity({ height: '0', width: '0', top: '10px', marginLeft: '-6px'}, { duration: 100 });
             }
             thumb.removeClass('active');
              }
            });
       
</script> 

Selamat mencoba.. semoga bermanfaat. 

Artikel Terkait

Membuat Input Range Slider dengan Value Bubbles menggunakan Jquery

4/ 5

Oleh share.materi

share.materi 19.19 Komentar