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