/ / Zurb Foundation 5.5.2 Bereich Slider Klicken auf Balken, um den Griff in Position zu bewegen funktioniert nicht - zurb-foundation, zurb-foundation-5

Zurb Foundation 5.5.2 Range Slider Klicken auf Balken, um den Griff zur Position zu bewegen funktioniert nicht - zurb-foundation, zurb-foundation-5

Ich benutze Zurb Foundation 5.5.2 und versuche, den Range Slider wie auf dem Website-Dokumentationsseite der Foundation für Bereichsschieberegler. Die gewünschte Funktionalität besteht darin, dass Sie auf einen beliebigen Ort in der Leiste klicken und der Handle zu dieser Position fortschreitet. Auf der Website Website Spüle SeiteWenn Sie auf den Bereichsschieberegler klicken, geschieht nichts. Auf dieser Codepen dass ich den einfachsten Schiebereglercode verwende, kann man auch nicht auf den Balken klicken und den Griff zum Vorrücken bringen. Wie bekomme ich das zum Laufen?

Hier ist der Codepen-Code:

<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

Antworten:

1 für die Antwort № 1

Die Foundation v5.x-Serie scheint kein Mousemove-Ereignis auszulösen, wenn ein Schieberegler verwendet wird. Ich habe in Foudantionsproblemen auf GitHub geforscht:

slider: Fügen Sie Unterstützung für das Ändern hinzu, indem Sie auf den Schieberegler klicken, ohne mit dem Ziehen begonnen zu haben

Es fällt mir auf, dass diese Funktion nur für zukünftige Versionen der Foundation-Bibliothek wie z v5.5.3 oder v5.6 (siehe Meilensteine).

Aber Sie können diese Rechte jetzt verwenden, kopieren Sie einfach und o-Rohcode von GitHub:

Klicken Sie einfach auf die Schaltfläche "Raw" und speichern Sie sie im lokalen Speicher.
Also sollte es so funktionieren:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
<div class="small-10 medium-11 columns">
<!-- SLIDER START   -->
<div class="range-slider" data-slider  data-options="display_selector: #sliderOutput3;trigger_input_change: true">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
<!-- SLIDER END   -->
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Foundation updated -->
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.js"></script>
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.slider.js"></script>

<script>$(document).foundation();</script>
</body>
</html>