Ziehen Sie basierend auf jquery die Maus nach links und rechts, um den Schieberegler mit dem Quellcode download_jquery zu verschieben

Bevor Sie den Haupttext eingeben, lassen Sie mich eine Darstellung posten, um zu sehen, ob es der gewünschte Effekt ist:

Online-Demo Quellcode-Download

Basierend auf dem Einstellungscode für das Ziehen des mobilen jQuery-Schiebereglers. Dies ist ein Spezialeffekt, der Mobiltelefone unterstützt. Sie können die Bereichsauswahl des Schiebereglers und die Werteauswahl des Schiebereglers ziehen.

Kein Unsinn mehr, lassen Sie mich einfach den Code für Sie posten.

HTML-Code:

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

JS-Code:

$(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);
     });
   });