Wie erstellt man ein Slider-Diagramm für eine Webseite?

Ich möchte einen Schieber Diagramm, wie dies für meine Webseite erstellen, Ergebnisse anzuzeigen: Wie erstellt man ein Slider-Diagramm für eine Webseite?

Wie kann ich dies tun, vorausgesetzt ich habe ein Maximum und Minimum und den Wert I zeichnen möchte? Ich würde es gerne spontan erstellen, während ich die Ergebnisseite mit html/javascript/php erzeuge.

EDIT: Ich kann sehen, dass meine Frage verwirrend war. Ich möchte keinen Schieberegler (wie eine Eingabe in ein Formularformular) erstellen, sondern ein Ausgabediagramm, das eine vertikale Linie mit einem festen Wert und einem Farbverlaufshintergrund aufweist.

Vielen Dank für Antworten!

Quelle

2017-12-18 aqua

Endlich habe ich es. Nur HTML und CSS (und PHP, wenn ich möchte in der Lage sein, dynamisch die vertikale Linie zuweisen, indem style="left:x%" mit)

.grad { 
 
\t background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75)); 
 
\t width: 100px; 
 
\t height: 15px; 
 
\t border-radius: 24px; 
 
\t border-color: #446e9b; 
 
\t border-width: 1px; 
 
} 
 

 
.vertical-line { 
 
\t width: 1px; 
 
\t height: 15px; 
 
\t border-left: 2px solid #446e9b; 
 
\t position: relative; 
 
\t top: 0; 
 
\t background: none; 
 
} 
 

 
.tick { 
 
\t width: 1px; 
 
\t height: 5px; 
 
\t border-left: 1px solid #999999; 
 
\t position: relative; 
 
\t top: 0; 
 
\t background: none; 
 
} 
 

 
.bottom-tick { 
 
\t margin-top: -5px; 
 
} 
 

 
.top-tick{ 
 
    margin-top: -5px; 
 
} 
 

 
.inner10{ 
 
\t z-index: 10; 
 
} 
 
.inner2{ 
 
\t z-index: 2; 
 
\t left: 20%; 
 
\t margin-top: -15px; 
 
} 
 
.inner3{ 
 
\t z-index: 3; 
 
\t left: 40%; 
 
} 
 
.inner4{ 
 
\t z-index: 4; 
 
\t left: 60%; 
 
} 
 
.inner5{ 
 
\t z-index: 5; 
 
\t left: 80%; 
 
} 
 
.inner6{ 
 
\t z-index: 6; 
 
\t left: 20%; 
 
} 
 
.inner7{ 
 
\t z-index: 7; 
 
\t left: 40%; 
 
} 
 
.inner8{ 
 
\t z-index: 8; 
 
\t left: 60%; 
 
} 
 
.inner9{ 
 
\t z-index: 9; 
 
\t left: 80%; 
 
}

<div class="grad"> 
 
    <div class='vertical-line inner10' style="left:35%"></div> 
 
    <div class='tick inner6 bottom-tick'></div> 
 
    <div class='tick inner7 bottom-tick'></div> 
 
    <div class='tick inner8 bottom-tick'></div> 
 
    <div class='tick inner9 bottom-tick'></div> 
 
    <div class='tick inner2'></div> 
 
    <div class='tick inner3 top-tick'></div> 
 
    <div class='tick inner4 top-tick'></div> 
 
    <div class='tick inner5 top-tick'></div> 
 
</div>

Quelle

2017-12-18 14:04:39 aqua

<html> 
 
<style> 
 
#slidecontainer { 
 
    width: 100%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    height: 25px; 
 
    background: #d3d3d3; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 
</style> 
 
<body> 
 

 

 

 
<div id="slidecontainer"> 
 
    
 
    
 
    
 
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> 
 
</div> 
 

 
</body> 
 
</html>

hier Sie einen Schieberegler haben, viel Spaß!

Quelle

2017-12-18 11:12:06 Robin

Danke für thw Antwort, aber ich kann sehen, dass meine Frage war, verwirrend. Ich möchte keinen Schieberegler (wie eine Eingabe in ein Formularformular) erstellen, sondern ein Ausgabediagramm, das eine vertikale Linie mit einem festen Wert und einem Farbverlaufshintergrund aufweist. – aqua

Da Sie Min-Max-Wert wünschen, müssen Sie 2 Bereich Schieberegler erstellen.

Überprüfen Sie das Snippet unten.

var rangeSlider = function(){ 
 
    var slider = $('.range-slider'), 
 
     range = $('.range-slider__range'), 
 
     value = $('.range-slider__value'); 
 
    
 
    slider.each(function(){ 
 

 
    value.each(function(){ 
 
     var value = $(this).prev().attr('value'); 
 
     $(this).html(value); 
 
    }); 
 

 
    range.on('input', function(){ 
 
     $(this).next(value).html(this.value); 
 
    }); 
 
    }); 
 
}; 
 

 
rangeSlider();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="range-slider"> 
 
    <label>Min.</label> 
 
    <input class="range-slider__range" type="range" value="100" min="0" max="500"> 
 
    <span class="range-slider__value">0</span> 
 
</div> 
 

 
<div class="range-slider"> 
 
<label>Max.</label> 
 
    <input class="range-slider__range" type="range" value="250" min="0" max="500" step="50"> 
 
    <span class="range-slider__value">0</span> 
 
</div>

Und Wenn Sie Platz sparen wollen, können Sie 1 Bereich Slider mit 2 Schieberegler erstellen. Erstellen Sie einen HTML-Wert für den Bereichsschieberegler und wenden Sie dann eine JQuery an. Bitte überprüfen Sie folgende Snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" media="screen"> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 

 

 

 
     <div data-role="rangeslider"> 
 
     <label for="price-min">Price:</label> 
 
     <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000"> 
 
     <label for="price-max">Price:</label> 
 
     <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000"> 
 
     </div>

Dann, wenn Sie Daten senden möchten, um sich auf den db Sie Formular erstellen, müssen für diese

Referenz für Bereichsschieberegler: https://www.w3schools.com/howto/howto_js_rangeslider.asp

Ich hoffe, Diese Antwort kann helfen.

Quelle

2017-12-18 11:56:52

Danke für die Antwort, aber ich kann sehen, dass meine Frage verwirrend war. Ich möchte keinen Schieberegler (wie eine Eingabe in ein Formularformular) erstellen, sondern ein Ausgabediagramm, das eine vertikale Linie mit einem festen Wert und einem Farbverlaufshintergrund aufweist. – aqua

Wie erstellt man ein Slider-Diagramm für eine Webseite?

Antwort

Verwandte Themen