Aufbau eines Zeitschiebers, nicht sicher, wo ich anfangen soll

Question

Ich möchte also eine Zeitanzeige ähnlich der folgenden Abbildung erstellen.

Ich möchte es dynamisch erstellen, ohne ein Bild verwenden zu müssen, aber mir fehlt der beste Weg dazu.

Grundsätzlich möchte ich 100 Punkte, die innerhalb eines div sein werden, so dass Punkt 1 bei 0% beginnt und Punkt 100 bei 100% endet.

Ich kann herausfinden, wie Sie die Punkte bei jedem Vielfachen von 5 erhalten, um in der Höhe zu variieren.

Für jetzt suche ich nur eine kleine Anleitung, wo ich anfangen soll zu suchen. Ich dachte daran, eine SVG zu verwenden, aber ich bin nicht sehr versiert darin und ich hätte gerne etwas Input, bevor ich Stunden damit verbringe, diese Lösung einzubauen.

Im nächsten Schritt I wird die Farbe eines specefic Punkt geändert werden müssen, basierend auf einem Schieber darunter (also wenn der Schieber zu 70% Breite gezogen wird, ich brauche Knoten 70 zu zielen und seine Farbe chage)

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Sie konnten die jQuery UI Schieber (https://jqueryui.com/slider/#steps) Kasse Sie den Start. Wahrscheinlich möchten Sie das Beispiel verwenden, das in Inkrementen einrastet, und von dort aus können Sie CSS-Stile hinzufügen, um den Schieberegler so aussehen zu lassen, wie Sie ihn haben wollen.

<script> 
    $(function() { 
    $("#slider").slider({ 
     value:100, 
     min: 1, 
     max: 100, 
     step: 5, 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.value); 
     } 
    }); 
    $("#amount").val("$" + $("#slider").slider("value")); 
    }); 
    </script>