Basé sur jquery, faites glisser la souris vers la gauche et la droite pour faire glisser le curseur avec le code source download_jquery

Avant d'entrer le texte principal, permettez-moi de poster un rendu pour voir si c'est l'effet que vous souhaitez :

Démo en ligne Téléchargement du code source

Basé sur le code de réglage du curseur mobile jQuery. Il s'agit d'un effet spécial qui prend en charge les téléphones mobiles. Vous pouvez faire glisser le sélecteur de plage du curseur et faire glisser le sélecteur de valeur du curseur.

Plus de bêtises, laissez-moi vous poster le code.

Code 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> 

code 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);
     });
   });