HTML5 Eingabetyp Bereich mit min Werteregler, max Werteregler und Zecken

-2

Ich habe Bereich HTML5 input typeHTML5 Eingabetyp Bereich mit min Werteregler, max Werteregler und Zecken

<input type="range" min="0" max="100" step="10" value="40" />

Jetzt will ich zeigen Zecken auf Schritte wie auf Bild implementieren angebracht. Ist es möglich ? Gibt es irgendeinen Weg ?

Quelle

2017-02-22 Shadow Walker

Welche Ticks und wie beziehen sie sich auf Schritt? – Mairaj

Zeig uns, was du probiert hast? Was wird erwartet? –

Sie wollen was jetzt? Bitte erläutern Sie, was Sie genauer zu erreichen versuchen. – George

input type Implementieren dieser Range mit HTML5 ist nicht möglich, weil es Sie diesen Schieber, durch den Einsatz JQUERY erreichen kann nur ein Eingang

nehmen diese

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>slider</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#slider-range").slider({ 
 
     range: true, 
 
     min: 0, 
 
     max: 500, 
 
     values: [ 75, 300 ], 
 
     slide: function(event, ui) { 
 
     $("#amount").val("₹" + ui.values[ 0 ] + " - ₹" + ui.values[ 1 ]); 
 
     } 
 
    }); 
 
    $("#amount").val("₹" + $("#slider-range").slider("values", 0) + 
 
     " - ₹" + $("#slider-range").slider("values", 1)); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
    
 
<div id="slider-range"></div> 
 
    
 
    
 
</body> 
 
</html>

Quelle

2017-02-22 11:47:58

Vielen Dank für diese Antwort. Ich habe genau danach gesucht –

Es gibt keine Ticks ... das OP fragte nach Ticks. – vsync

@vsync gut zeigen Sie mir den Wert auf Folie. Ich kann damit arbeiten :) –

Siehe Woodrow Barlow Antwort here. Ich werde hier zusammenfassen:

Internet Explorer (alle Dinge) unterstützen diese aus dem Kasten heraus, wenn Sie den Schritt Attribut, wie in Ihrer Frage liefern:

<input type="range" min="0" max="100" step="10" value="40" />

Für andere Browser werden verschiedene Abhilfen benötigt mit möglichen Nebenwirkungen. In Chrome und Safari können Sie eine Datenliste verwenden Sie die Schritte zur Verfügung zu stellen:

<input type="range" min="0" max="100" step="25" list="steplist"> 
<datalist id="steplist"> 
    <option>0</option> 
    <option>25</option> 
    <option>50</option> 
    <option>75</option> 
    <option>100</option> 
</datalist>

in Firefox, die Lösung ist noch aufwendiger und umfasst kundenspezifische CSS - see this jsFiddle.

Quelle

2017-02-22 11:12:04 Lagostra

das soll in Kommentarabschnitt sein –

überprüfen

Ich habe dir eine simple example gemacht, die dir zeigen wird, wie man w was du willst.

Dieser Code generiert Ticks für Sie, und Sie können die Anzahl der Ticks und deren Stil entsprechend ändern. Sie sollten das HTML automatisch generieren.

.rangeWrap { 
 
    width: 40%; 
 
} 
 
.rangeWrap input { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
.rangeWrap .ticks { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 6px; 
 
    margin: -1.5em 5px 0 6px; 
 
    font: 10px Arial; 
 
    counter-reset: count -1; 
 
} 
 
.rangeWrap .ticks > div { 
 
    height: 100%; 
 
    width: 1px; 
 
    background: silver; 
 
    counter-increment: count 1; 
 
} 
 
.rangeWrap .ticks > div:nth-child(5n - 4) { 
 
    height: 200%; 
 
} 
 
.rangeWrap .ticks > div:nth-child(5n - 4)::before { 
 
    display: block; 
 
    content: counter(count,decimal); 
 
    transform: translate(-50%, 100%); 
 
    text-align: center; 
 
    width: 16px; 
 
}

<div class='rangeWrap'> 
 
    <input type="range" min="0" max="100" step="10" value="40" /> 
 
    <div class='ticks'> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    </div>

Quelle

2017-02-22 12:10:33 vsync

Danke für dieses Sol. Das könnte der eine sein, aber ich habe genauer gesagt, wonach ich gesucht habe. Ich habe diese Antwort akzeptiert. Danke für die Hilfe –

@AsifAhmad - kein Problem. aber der Titel dieser Frage verlangt eindeutig nach ** Ticks ** und ich habe Zeit damit verbracht, Ihnen Code zu erstellen, der das tut, wonach Sie gefragt haben. Sie haben darum gebeten, Ticks anzuzeigen. Ich habe Ticks gezeigt :) es ist nicht wirklich fair für mich, meine Zeit zu verbringen, wenn du die ganze Zeit eine Multirange haben wolltest. – vsync

Ich möchte beide n ich gona ein Hybrid aus diesen beiden :) –

Ich habe genau gefunden, was Sie nach:

https://github.com/IonDen/ion.rangeSlider

Quelle

2017-02-28 10:26:16 vsync

dies tun nativ/polyfilled:

Für den Markierungen: Woodrow Barlows answer (zusammengefasst in @ Lagostra auf diese Frage ist) ist die native Lösung, aber es ist derzeit nicht sehr anpassbar
Für die Doppel-Slider: Die [type="range"] spec umfasst ein multiple Attribut, das genau dies tun soll ... aber zum jetzigen Zeitpunkt unterstützen keine Browser es. Das http://leaverou.github.io/multirange/ Polyfill funktioniert für alle Browser, die CSS-Variablen unterstützen.

Quelle

2017-06-15 15:42:03 henry

HTML5 Eingabetyp Bereich mit min Werteregler, max Werteregler und Zecken

Antwort

Verwandte Themen