Berdasarkan jquery, seret tetikus ke kiri dan kanan untuk meluncurkan peluncur dengan kod sumber download_jquery

Sebelum memasukkan teks utama, izinkan saya menyiarkan pemaparan untuk melihat sama ada ia adalah kesan yang anda mahukan:

Demo dalam talian Muat turun kod sumber

Berdasarkan kod tetapan penyeretan gelangsar mudah alih jQuery. Ini ialah kesan khas yang menyokong telefon bimbit Anda boleh menyeret pemilih julat gelangsar dan menyeret pemilih nilai peluncur.

Tiada lagi perkara karut, izinkan saya siarkan kod untuk anda.

kod html:

<div class="demo">
    <input type="hidden" class="single-slider" value="0" />
    <!-- <button id="g1">获取值</button> -->
  </div>
  <div class="demo">
    <input class="range-slider" type="hidden" value="10,89" />
    <!-- <button id="g2">获取值</button> -->
  </div> 

kod js:

$(function () {
     $('.single-slider').jRange({
       from: 0,
       to: 100,
       step: 1,
       scale: [0, 25, 50, 75, 100],
       format: '%s',
       width: 300,
       showLabels: true,
       showScale: true
     });
     $('.range-slider').jRange({
       from: 0,
       to: 100,
       step: 1,
       scale: [0, 25, 50, 75, 100],
       format: '%s',
       width: 300,
       showLabels: true,
       isRange: true
     });
     $("#g1").click(function () {
       var aa = $(".single-slider").val();
       alert(aa);
     });
     $("#g2").click(function () {
       var aa = $(".range-slider").val();
       alert(aa);
     });
   });