Last active
December 30, 2019 21:26
-
-
Save NerdyDeedsLLC/80ef1edf25f8d5d1021f4aaf98562fc6 to your computer and use it in GitHub Desktop.
Combo-Sliders - textfields that act as a range slider when mousedown'd and held, but like a normal field when clicked/focused.
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
| /* | |
| CodePen Demo: https://codepen.io/ZenAtWork/pen/7a5c5e18834fb0584f310321a8c37456 | |
| USAGE | |
| Include any standard text inputs you wish to convert to ComboSliders, and set each's class to "slider". ex: | |
| <input type="text" id="testSlider" data-step="1" data-max="200" data-min="0" data-unit="%" data-value="10" class="ComboSlider" value="10" /> | |
| <input type="text" id="testSlider2" data-step="1" data-max="10" data-min="0" data-unit="px" data-value="5" class="slider" /> | |
| ...then (recommended onLoad, but knock yourselves out), call the conversion routine provided within the API: | |
| window.addEventListener('load', ComboSlider.convertAllComboSliders); | |
| SOME THINGS WORTH NOTING: | |
| - You may omit any or all of the above tag params with the exception of id and class (set to 'slider', of course): | |
| <input id="ComboSliderID" class="slider" /> | |
| - The CSS code relevant to the controls is bundled into the code in a minified format. I agree, this is not ideal, | |
| but I wanted the portability. It IS all scoped and name-spaced, however, so it shouldn't impact anything else. | |
| - Should you provide both a value and a data-value parameter, the vanilla html value will take precidence. | |
| - At present, the sizes for the sliders are fixed at 200px x 40px, though I'll likely make that configurable in the next release. | |
| - There is a known matter where, should you provide a data-step value AND a data-max value that is not divisible by that | |
| data-step, the range will terminate at the highest value it CAN make it to (eg. a max of 170 and a step of 13 will | |
| produce a track that reaches to 170, but a value that will max out at 169). | |
| I haven't decided if this is a bug or a feature yet. If you have a use case that can decide the matter, I'll listen. | |
| - The data-precision attribute will enforce the number of digits trailing the decimal... unless they're 0, in which case they're trimmed. | |
| This also applies to stepped values. For example: | |
| ~ Given a data-precision of "2" and a value of "12.3456", the result will read "12.35". Same goes for "12.3544" | |
| ~ Given a data-precision of "2" and a value of "12.0001", the result will read "12". Same goes for "12.00" | |
| ~ Given a data-precision of "2", a data-step of "0.5" and a value of "12.74", the result will read "12.5". Same goes for "11.76" | |
| ~ Finally, given a data-precision of "0", a data-step of "0.01" and a value of "0.88" the result will read... "1". Don't do that. | |
| CONFIGURATION VARIABLES | |
| These should be provided on the HTML tag to be replaced. Again if you've a use case for a purely programmatic injection, I'm listening. | |
| data-max The maximum value the slider should go UP to. In other words, how high it goes if you slide it all the way to the RIGHT (Defaults to "100"). | |
| data-min The minimum value the slider should go DOWN to. In other words, how low it goes if you slide it all the way to the LEFT (Defaults to "0"). | |
| data-step The increment in which the slider will move (see WORTH NOTING, above) when slid or blurred (Defaults to "1"). | |
| data-unit The unit label that will be tacked on to the value within the field (ex. "px", "%", "units", "lightbulbs", "fish" defaults to "%") | |
| data-precision The number of decimals that will be displayed (e.g., a value here of "2" will yield 47.25, assuming the user selected 47.245; defaults to "2") | |
| value/data-value The initial starting value* for the field (defaults to "0"*). | |
| If you don't care for any of the assumptions made, defaults provided, or methodologies used in coding, you're welcome to get forked. | |
| */ | |
| const w = window // Alias - window | |
| , d = document // Alias - document | |
| , b = d.body // Alias - document.body | |
| , M = Math | |
| , qs = (s,scope=d) => scope.querySelector(s) // HelperFn - querySelector | |
| , qsa = (s,scope=d) => [...scope.querySelectorAll(s)]; | |
| w.__ComboSliders = []; | |
| class ComboSlider { | |
| constructor(sliderID, className='') { | |
| this.trackObj = null; | |
| this.gripObj = null; | |
| this.fieldObj = null; | |
| this.id = sliderID; | |
| this.trackID = 'trk' + sliderID; | |
| this.gripID = 'grp' + sliderID; | |
| this.fieldID = 'fld' + sliderID; | |
| this.className = 'slider-combo'; | |
| this.grabbingTmr = null; | |
| this.grabbedTmr = null; | |
| this.getValue = this.getValue.bind(this); | |
| this.setValues = this.setValues.bind(this); | |
| this.handleMouseMoveOnSlide = this.handleMouseMoveOnSlide.bind(this); | |
| this.normalizeKeyboardInput = this.normalizeKeyboardInput.bind(this); | |
| this.blurFieldAndRelaxFocus = this.blurFieldAndRelaxFocus.bind(this); | |
| this.handleClickForStdFocus = this.handleClickForStdFocus.bind(this); | |
| this.handleMousedownAndHold = this.handleMousedownAndHold.bind(this); | |
| this.handleMouseupWhileHeld = this.handleMouseupWhileHeld.bind(this); | |
| } | |
| _value = 0; | |
| _percent = 0; | |
| _status = ''; | |
| _step = 1; | |
| _min = 0; | |
| _max = 100; | |
| _unit = '%'; | |
| get value() { return this._value || 0; } set value(v) { this._value = v; } | |
| get percent() { return this._percent || 0; } set percent(p) { this._percent = p; } | |
| get status() { return this._status || ''; } set status(s) { this._status = s; } | |
| get step() { return this._step || 1; } set step(s) { this._step = s; } | |
| get min() { return this._min || 0; } set min(m) { this._min = m; } | |
| get max() { return this._max || 100; } set max(x) { this._max = x; } | |
| get unit() { return this._unit || ''; } set unit(u) { this._unit = u; } | |
| get precision() { return this._precision || 2; } set precision(p) { this._precision = p; } | |
| getValue() { return this._value; } | |
| setValues(newVal, units=null) { | |
| this.percent = parseFloat(newVal.toFixed(this.precision)); | |
| if(newVal * 1 < this.min * 1) newVal = this.min * 1; | |
| if(newVal * 1 > this.max * 1) newVal = this.max * 1; | |
| let valueAdjustedForRange = parseFloat(((this.percent /100) * (this.max)).toFixed(this.precision)); | |
| valueAdjustedForRange = parseFloat((Math.round(valueAdjustedForRange / this.step) * this.step).toFixed(this.precision)); | |
| this._value = valueAdjustedForRange; | |
| this.trackObj.style = "--val:" + (this.percent) + "%"; | |
| qs('.slider-combo-background', this.gripObj).dataset.value = valueAdjustedForRange; | |
| this.fieldObj.value = units ? valueAdjustedForRange + units : valueAdjustedForRange; | |
| } | |
| handleMousedownAndHold(){ | |
| if(this.status === "directlyFocusing") return; | |
| this.grabbingTmr = w.setTimeout(()=>{ | |
| this.trackObj.classList.add('gripping'); | |
| b.style.userSelect = 'none'; | |
| this.status = ''; | |
| }, 200); | |
| this.grabbedTmr = w.setTimeout(()=>{this.trackObj.classList.add('actively');}, 220); | |
| } | |
| handleMouseupWhileHeld(){ | |
| if(this.status === "directlyFocusing") return; | |
| w.clearTimeout(this.grabbingTmr); | |
| w.clearTimeout(this.grabbedTmr); | |
| this.grabbingTmr = null; | |
| this.grabbedTmr = null; | |
| this.trackObj.classList.remove('actively'); | |
| this.trackObj.classList.remove('gripping'); | |
| this.fieldObj.blur(); | |
| } | |
| handleClickForStdFocus(){ | |
| this.status = 'directlyFocusing'; | |
| this.fieldObj.value = this.fieldObj.value.replace(/[^0-9\.]/gim,''); | |
| this.fieldObj.focus() | |
| } | |
| blurFieldAndRelaxFocus(){ | |
| this.status = ''; | |
| if(this.fieldObj.value === '') this.setValues(0); | |
| console.log('this.getValue()', ); | |
| this.setValues(this.getValue() * (100/this.max), this.unit); | |
| } | |
| normalizeKeyboardInput(e, trg=e.target){ | |
| let forceUpdate = false, | |
| newVal = this.fieldObj.value; | |
| if(/[^0-9\.]/gim.test(newVal)){ | |
| newVal = newVal.replace(/[^0-9\.]/gim,''); | |
| forceUpdate = true; | |
| } | |
| if(newVal === '' && !forceUpdate) return; | |
| newVal = parseFloat(newVal); | |
| if(newVal * 1 > this.max * 1){ | |
| this.fieldObj.value = this.max; | |
| return this.fieldObj.blur(); | |
| } | |
| if(newVal * 1 < this.min * 1){ | |
| this.fieldObj.value = this.min; | |
| return this.fieldObj.blur(); | |
| } | |
| this.setValues(newVal); | |
| } | |
| handleMouseMoveOnSlide(e) { | |
| if(this.status === 'directlyFocusing' || this.trackObj.className.indexOf('gripping') === -1) return; | |
| let units = this.unit; | |
| let stepVal = this.step / 1; | |
| let maxVal = this.max / 1; | |
| let literalVal = e.x - this.trackObj.getBoundingClientRect().x; | |
| if (literalVal < 0) literalVal = 0; | |
| if (literalVal > 200) literalVal = 200; | |
| let percentVal = (Math.round((literalVal / 2).toFixed(this.precision)) / this.step) * this.step; | |
| percentVal = parseFloat(percentVal.toFixed(this.precision)); | |
| this.setValues(percentVal); | |
| } | |
| convertComboSlider(fieldObj) { | |
| Object.assign(this, fieldObj.dataset) | |
| let startVal = fieldObj.value || fieldObj.dataset.value; | |
| this.init(fieldObj); | |
| if(startVal && !isNaN(startVal) && startVal > this.min && startVal < this.max) this.setValues(startVal, this.unit); else this.setValues(0, this.unit) | |
| } | |
| static convertAllComboSliders() { | |
| let sliders = qsa('.slider'); | |
| sliders.forEach(slider => { | |
| if(!slider.id) return; | |
| w.__ComboSliders[slider.id] = new ComboSlider(slider.id); | |
| w.__ComboSliders[slider.id].convertComboSlider(slider); | |
| }); | |
| } | |
| init (fieldObj) { | |
| fieldObj.insertAdjacentHTML('beforeBegin', | |
| `<div id="${this.trackID}" style="--val:${this.percent}" data-step="${this.step}" data-max="${this.max}" data-min="${this.min}" data-unit="${this.unit}" data-value="${this.value}" class="slider-combo"> | |
| <div id="${this.gripID}" class="slider-combo-grip"> | |
| <span class="arrow-halo"></span> | |
| <div class="slider-combo-background"> | |
| <input type="text" id="${this.fieldID}" value="${this.value + this.unit}" class="slider-combo-inputfield"> | |
| </div> | |
| </div> | |
| </div>`); | |
| fieldObj.remove(); | |
| this.trackObj = qs('#' + this.trackID); | |
| this.fieldObj = qs('#' + this.fieldID); | |
| this.gripObj = qs('#' + this.gripID); | |
| //console.log(this.trackObj, this.trackID, this.fieldObj, this.fieldID, this.gripObj, this.gripID); | |
| this.trackObj.addEventListener("mousedown", this.handleMousedownAndHold); | |
| this.trackObj.addEventListener("mouseup", this.handleMouseupWhileHeld); | |
| this.trackObj.addEventListener("mouseover", this.handleMouseMoveOnSlide); | |
| this.trackObj.addEventListener("mousemove", this.handleMouseMoveOnSlide); | |
| this.fieldObj.addEventListener("click", this.handleClickForStdFocus); | |
| this.fieldObj.addEventListener("blur", this.blurFieldAndRelaxFocus); | |
| this.fieldObj.addEventListener("keyup", this.normalizeKeyboardInput); | |
| w.addEventListener( "mouseup", this.handleMouseupWhileHeld); | |
| } | |
| } | |
| window.addEventListener('load', ()=>{ | |
| document.body.insertAdjacentHTML('beforeEnd', `<style> | |
| .slider-combo,.slider-combo *,.slider-combo ::after,.slider-combo ::before{box-sizing:border-box;position:relative}.slider-combo{display:inline-block;width:200px;height:40px;background:linear-gradient(180deg,#fff0 0,#fff0 26px,#555 26px,#aaa 28px,#aaa 32px,#fff0 32px,#fff0 40px);padding:0}.slider-combo .slider-combo-grip{position:absolute;display:block;text-align:center;-webkit-transform:translatex(calc(-1px + -50%));transform:translatex(calc(-1px + -50%))}.slider-combo .slider-combo-grip::after{content:'';pointer-events:none;width:14px;height:14px;position:static;display:inline-block;background:linear-gradient(180deg,#fff 0,#ccc 100%);border-radius:50%;border:1px solid #777;box-shadow:0 1px 4px #0007;-webkit-transform:none;transform:none}.slider-combo:not(.gripping){z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;transition:.3s all ease-in-out;box-shadow:inset 32px 0 #fff,inset -34px 0 #fff}.slider-combo:not(.gripping) *{transition:.3s all ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slider-combo:not(.gripping) .slider-combo-grip{top:11px;left:50%;pointer-events:all}.slider-combo:not(.gripping) .slider-combo-grip::after{-webkit-transform:scale(0);transform:scale(0)}.slider-combo:not(.gripping) .slider-combo-grip .slider-combo-background{background:#eee;border:.5px solid #aaa;display:block;position:static;padding:5px 5px 5px;border-radius:7px}.slider-combo:not(.gripping) .slider-combo-grip .slider-combo-background .slider-combo-inputfield{width:125px;border:2px solid #aaa;height:22px;font-size:13px;line-height:24px;border-radius:3px;text-align:center;color:#333}.slider-combo.gripping{transition:all .3s linear,left 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10000;box-shadow:none}.slider-combo.gripping *{transition:.3s all ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slider-combo.gripping::before{content:'';position:absolute;width:calc(100% + 1px);height:10px;top:26px;display:block;opacity:.25;z-index:-1;background:linear-gradient(90deg,#000 0,#000 1px,#fff0 1px,#fff0 22px,#000 22px,#000 23px,#fff0 23px,#fff0 44px,#000 44px,#000 45px,#fff0 45px,#fff0 67px,#000 67px,#000 68px,#fff0 68px,#fff0 89px,#000 89px,#000 90px,#fff0 90px,#fff0 111px,#000 111px,#000 112px,#fff0 112px,#fff0 133px,#000 133px,#000 134px,#fff0 134px,#fff0 155px,#000 155px,#000 156px,#fff0 156px,#fff0 178px,#000 178px,#000 179px,#fff0 179px,#fff0 199px,#000 199px,#000 200px)}.slider-combo.gripping .slider-combo-grip{top:21px;left:var(--val);width:10px;height:20px;pointer-events:none}.slider-combo.gripping .slider-combo-grip .arrow-halo{position:absolute;-webkit-transform:translate(-65px,-40px);transform:translate(-65px,-40px)}.slider-combo.gripping .slider-combo-grip .arrow-halo::after,.slider-combo.gripping .slider-combo-grip .arrow-halo::before{content:'';display:block;width:25px;height:25px;-webkit-transform:translate(10px,10px) rotate(-45deg);transform:translate(10px,10px) rotate(-45deg);-webkit-animation:arrows 1.5s infinite;animation:arrows 1.5s infinite;position:absolute;top:0}.slider-combo.gripping .slider-combo-grip .arrow-halo::after{-webkit-transform:scalex(-1) translate(-100px,10px) rotate(-45deg);transform:scalex(-1) translate(-100px,10px) rotate(-45deg)}.slider-combo.gripping .slider-combo-grip::after{z-index:-1}.slider-combo.gripping .slider-combo-grip .slider-combo-background{background:url("'data: image/svg+xml,%3Csvg xmlns = 'http: //www.w3.org/2000/svg' viewBox = '0 0 112.5 67' height = '50'%3E%3Cdefs%3E%3ClinearGradient id = 'a' x1 = '100%25' x2 = '75%25' y1 = '100%25' y2 = '10%25'%3E%3Cstop offset = '0%25' stop-opacity = '.1'/%3E%3Cstop offset = '90%25' stop-opacity = '.1'/%3E%3Cstop offset = '100%25' stop-opacity = '0'/%3E%3C/linearGradient%3E%3ClinearGradient id = 'b' x1 = '5%25' x2 = '30%25' y1 = '100%25' y2 = '10%25'%3E%3Cstop offset = '0%25' stop-opacity = '.1'/%3E%3Cstop offset = '90%25' stop-opacity = '.1'/%3E%3Cstop offset = '100%25' stop-opacity = '0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill = 'url(%23a)' fill-rule = 'evenodd' d = 'M55 43.5H4.233c-12.967 0 12.137 10.99 12.137 10.99 1.35.927 4.71 1.636 7.581 1.636l14.472-.269S45.409 66.342 55 65.5v-22z'/%3E%3Cpath fill = 'url(%23b)' fill-rule = 'evenodd' d = 'M56 43.5h51.458c13.042 0-12.212 11.06-12.212 11.06-1.359.932-4.739 1.644-7.628 1.644l-16.592-.27s-3.305 8.764-15.016 9.554L56 43.5z'/%3E%3Cpath fill = '%23DDD' fill-rule = 'evenodd' stroke = '%23999' d = 'M88 32.5H78c-2.537 1.829-15.521-1.21-16 6-.073 1.093.036 1.917.241 2.576C65.701 43.889 68 48.581 68 53c0 6.904-5.596 12.5-12.5 12.5S43 59.904 43 53c0-4.363 2.239-8.998 5.628-11.822.297-.683.466-1.536.372-2.678-.627-7.6-13.463-4.171-16-6H23c-2.761 0-5-2.239-5-5v-22c0-2.761 2.239-5 5-5h65c2.761 0 5 2.239 5 5v22c0 2.761-2.239 5-5 5z'/%3E%3C/svg%3E'") no-repeat;display:block;position:absolute;height:65px;top:-32px;left:-35px;padding:5px 5px 10px;z-index:-2;pointer-events:none}.slider-combo.gripping .slider-combo-grip .slider-combo-background::after{content:attr(data-value);width:48px;height:18px;line-height:18px;background:#eaeaea;color:#999;border:1px solid #aaa;display:block;position:absolute;box-shadow:inset 1px 1px 1px #0006;top:4px;left:18px;border-radius:3px;font-family:sans-serif;font-size:12px}.slider-combo.gripping .slider-combo-grip .slider-combo-background .slider-combo-inputfield{opacity:0}.slider-combo.gripping.actively,.slider-combo.gripping.actively *{transition:none!important}@-webkit-keyframes arrows{0%{box-shadow:inset 3px 3px 0 1px #00f,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #99f,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #ddf;opacity:.6}70%{box-shadow:inset 3px 3px 0 1px #99f,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #ddf,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #00f;opacity:.2}85%{box-shadow:inset 3px 3px 0 1px #ddf,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #00f,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #99f;opacity:.4}100%{box-shadow:inset 3px 3px 0 1px #00f,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #99f,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #ddf;opacity:.6}}@keyframes arrows{0%{box-shadow:inset 3px 3px 0 1px #00f,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #99f,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #ddf;opacity:.6}70%{box-shadow:inset 3px 3px 0 1px #99f,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #ddf,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #00f;opacity:.2}85%{box-shadow:inset 3px 3px 0 1px #ddf,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #00f,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #99f;opacity:.4}100%{box-shadow:inset 3px 3px 0 1px #00f,inset 5px 5px 0 2px #fff,inset 8px 8px 0 3px #99f,inset 10px 10px 0 4px #fff,inset 13px 13px 0 5px #ddf;opacity:.6}} | |
| </style>`); | |
| ComboSlider.convertAllComboSliders(); | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment