- Demonstrate how to use range_with_datalist

- Remove the -webkit-appearance because it causes the ticks to not appear
elgatosf · Feb 20, 2020 · 7dd7d29 · 7dd7d29
1 parent d7b8b2b
commit 7dd7d29
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css b/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css
@@ -883,7 +883,6 @@ input[type="range"]::-webkit-slider-runnable-track {
 
 input[type="range"]::-webkit-slider-thumb {
   position: relative;
-  -webkit-appearance: none;
   background-color: var(--sdpi-color);
   width: 12px;
   height: 12px;
@@ -1269,7 +1268,6 @@ a {
 }
 
 input[type=range] {
-  -webkit-appearance: none;
   /* background-color: green; */
   height:6px;
   margin-top: 12px;

diff --git a/Sources/com.elgato.pisamples.sdPlugin/index_pi.html b/Sources/com.elgato.pisamples.sdPlugin/index_pi.html
@@ -209,6 +209,20 @@
                 </div>
             </div>
 
+        <div type="range" class="sdpi-item" id="range_with_datalist">
+            <div class="sdpi-item-label">Range (with datalist)</div>
+            <div class="sdpi-item-value">
+                <span class="clickable" value="0">0</span>
+                <input type="range" min="0" max="100" step="25" value="75" list="steplist">
+                <datalist id="steplist">
+                    <option>25</option>
+                    <option>50</option>
+                    <option>75</option>
+                </datalist>
+                <span class="clickable" value="100">100</span>
+            </div>
+        </div>
+
             <div class="sdpi-heading">Meters</div>
 
            <div class="sdpi-item" type="progress" id="meter">