-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
236 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| .dual-range-container { | ||
| flex-direction: column; | ||
| width: 400px; | ||
| } | ||
|
|
||
| .dual-range-container .input-group-text { | ||
| background-color: #cbcdd6; | ||
| border: 0; | ||
| color: #252a2e; | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| .dual-range-container .input-group-append .input-group-text { | ||
| padding-left: 1px; | ||
| } | ||
|
|
||
| #fromSlider { | ||
| z-index: 1; | ||
| height: 0; | ||
| margin-top: 3px; | ||
| } | ||
|
|
||
| .sliders-control { | ||
| height: 18px; | ||
| background: repeating-linear-gradient(90deg, #888, #888 1px, transparent 1px, transparent 38.8px) no-repeat 50% 50%; | ||
| background-position: bottom center; | ||
| background-size: 393px 6px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .form-control-container-time-input { | ||
| background-color: #cbcdd6; | ||
| border: 0 !important; | ||
| color: #252a2e; | ||
| max-width: 28px; | ||
| height: 32px; | ||
| padding-left: 0 !important; | ||
| padding-right: 0 !important; | ||
| opacity: 1 !important; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .dual-range-container input[type="range"] { | ||
| appearance: none; | ||
| border-radius: 4px; | ||
| height: 6px; | ||
| forced-color-adjust: none; | ||
| pointer-events: none; | ||
| position: absolute; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .dual-range-container input[type="range"]::-webkit-slider-thumb { | ||
| width: 1rem; | ||
| height: 1rem; | ||
| appearance: none; | ||
| pointer-events: all; | ||
| cursor: pointer; | ||
| background-color: #fff; | ||
| border-radius: 50%; | ||
| box-shadow: 0 0 0 2px #0063a3; | ||
| } | ||
|
|
||
| .dual-range-container input[type="range"]::-moz-range-thumb { | ||
| width: 1rem; | ||
| height: 1rem; | ||
| pointer-events: all; | ||
| cursor: pointer; | ||
| background-color: #fff; | ||
| border-radius: 50%; | ||
| box-shadow: 0 0 0 2px #0063a3; | ||
| } | ||
|
|
||
| .dual-range-container input[type="range"]::-webkit-slider-thumb:hover { | ||
| background: #f7f7f7; | ||
| } | ||
|
|
||
| .dual-range-container input[type="range"]::-webkit-slider-thumb:active { | ||
| box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| function controlFromInput(fromSlider, fromInput, toInput, controlSlider) { | ||
| const [from, to] = getParsed(fromInput, toInput); | ||
| fillSlider(fromInput, toInput, '#0063a3', '#ddd', controlSlider); | ||
| if (from > to) { | ||
| fromSlider.value = to; | ||
| fromInput.value = to; | ||
| } else { | ||
| fromSlider.value = from; | ||
| } | ||
| } | ||
|
|
||
| function controlToInput(toSlider, fromInput, toInput, controlSlider) { | ||
| const [from, to] = getParsed(fromInput, toInput); | ||
| fillSlider(fromInput, toInput, '#0063a3', '#ddd', controlSlider); | ||
| setToggleAccessible(toInput); | ||
| if (from <= to) { | ||
| toSlider.value = to; | ||
| toInput.value = to; | ||
| } else { | ||
| toInput.value = from; | ||
| } | ||
| } | ||
|
|
||
| function controlFromSlider(fromSlider, toSlider, fromInput) { | ||
| const [from, to] = getParsed(fromSlider, toSlider); | ||
| fillSlider(fromSlider, toSlider, '#0063a3', '#ddd', toSlider); | ||
| if (from > to) { | ||
| fromSlider.value = to; | ||
| fromInput.value = to; | ||
| } else { | ||
| fromInput.value = from; | ||
| } | ||
| } | ||
|
|
||
| function controlToSlider(fromSlider, toSlider, toInput) { | ||
| const [from, to] = getParsed(fromSlider, toSlider); | ||
| fillSlider(fromSlider, toSlider, '#0063a3', '#ddd', toSlider); | ||
| setToggleAccessible(toSlider); | ||
| if (from <= to) { | ||
| toSlider.value = to; | ||
| toInput.value = to; | ||
| } else { | ||
| toInput.value = from; | ||
| toSlider.value = from; | ||
| } | ||
| } | ||
|
|
||
| function getParsed(currentFrom, currentTo) { | ||
| const from = parseInt(currentFrom.value, 10); | ||
| const to = parseInt(currentTo.value, 10); | ||
| return [from, to]; | ||
| } | ||
|
|
||
| function fillSlider(from, to, sliderColor, rangeColor, controlSlider) { | ||
| const rangeDistance = to.max - to.min; | ||
| const fromPosition = from.value - to.min; | ||
| const toPosition = to.value - to.min; | ||
| controlSlider.style.background = `linear-gradient( | ||
| to right, | ||
| ${sliderColor} 0%, | ||
| ${sliderColor} ${(fromPosition / rangeDistance) * 100}%, | ||
| ${rangeColor} ${(fromPosition / rangeDistance) * 100}%, | ||
| ${rangeColor} ${(toPosition / rangeDistance) * 100}%, | ||
| ${sliderColor} ${(toPosition / rangeDistance) * 100}%, | ||
| ${sliderColor} 100%)`; | ||
| } | ||
|
|
||
| function setToggleAccessible(currentTarget) { | ||
| const toSlider = document.querySelector('#toSlider'); | ||
| if (Number(currentTarget.value) <= 0) { | ||
| toSlider.style.zIndex = 2; | ||
| } else { | ||
| toSlider.style.zIndex = 0; | ||
| } | ||
| } | ||
|
|
||
| const fromSlider = document.querySelector('#fromSlider'); | ||
| const toSlider = document.querySelector('#toSlider'); | ||
| const fromInput = document.querySelector('#fromInput'); | ||
| const toInput = document.querySelector('#toInput'); | ||
| fillSlider(fromSlider, toSlider, '#0063a3', '#ddd', toSlider); | ||
| setToggleAccessible(toSlider); | ||
|
|
||
| fromSlider.oninput = () => controlFromSlider(fromSlider, toSlider, fromInput); | ||
| toSlider.oninput = () => controlToSlider(fromSlider, toSlider, toInput); | ||
| fromInput.oninput = () => | ||
| controlFromInput(fromSlider, fromInput, toInput, toSlider); | ||
| toInput.oninput = () => controlToInput(toSlider, fromInput, toInput, toSlider); | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
| var fromInput = document.getElementById('fromInput'); | ||
| var fromSlider = document.getElementById('fromSlider'); | ||
|
|
||
| fromInput.addEventListener('blur', function () { | ||
| if (this.value === '') { | ||
| this.value = '30'; | ||
| fromSlider.value = '30'; | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en" data-bs-theme="auto"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <title>Dual Range with Meter</title> | ||
| <meta name="description" content="Dual Range with Meter" /> | ||
| <link href="https://cdn.jsdelivr.net/npm/@trimbleinc/modus-bootstrap@1.6.4/dist/modus.min.css" rel="stylesheet" /> | ||
| <link href="dual-range.css" rel="stylesheet" /> | ||
| <script src="dual-range.js" defer></script> | ||
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌡️</text></svg>" /> | ||
| <meta name="robots" content="noindex, nofollow" /> | ||
| </head> | ||
|
|
||
| <body class="mt-5 overflow-hidden"> | ||
| <div class="d-flex dual-range-container mx-auto"> | ||
| <div class="mb-2"> | ||
| <h4>Temperature Threshold</h4> | ||
| </div> | ||
|
|
||
| <div class="sliders-control my-2"> | ||
| <input id="fromSlider" aria-label="from" type="range" value="30" min="0" max="99" /> | ||
| <input id="toSlider" aria-label="to" type="range" value="70" min="1" max="100" /> | ||
| </div> | ||
|
|
||
| <div class="mt-1 row"> | ||
| <div class="input-group input-group-sm col-6"> | ||
| <div class="input-group-prepend"> | ||
| <label class="input-group-text pl-1 pr-0">Less than</label> | ||
| </div> | ||
| <input disabled type="text" id="fromInput" value="30" class="form-control form-control-container-time-input" required /> | ||
| <div class="input-group-append"> | ||
| <span class="input-group-text">°F</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="input-group input-group-sm col-6 justify-content-end"> | ||
| <div class="input-group-prepend"> | ||
| <label class="input-group-text px-1">Greater than</label> | ||
| </div> | ||
| <input disabled type="text" id="toInput" value="70" class="form-control form-control-container-time-input" required /> | ||
| <div class="input-group-append"> | ||
| <span class="input-group-text">°F</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters