Safe Range Tooltip
How do I make an safe range tooltip?
Solving a common UI mistake, to keep a tooltip into its input-range safe area. It's 'em' sized, so you can scale it with a simple 'font-size' property.. What is a safe range tooltip? How do you make a safe range tooltip? This script and codes were developed by Tadaima on 01 December 2022, Thursday.
Safe Range Tooltip - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Safe Range Tooltip</title> <title>Safe Range Tooltip</title> <meta charset="utf-8"> <meta name="description" content="Solving a common UI mistake, to keep a tooltip into its input-range safe area. This HTML5 exercise is cross-browser and ready to use, crafted without third-party JS libraries ;)"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A group of digital interface crafters."> <meta name="author" content="Tadaima"> <meta name="organization" content="Tadaima Web Site"> <meta name="application-name" content="Tadaima Web Site"> <meta name="keywords" content="art direction, design, graphic design, simple, easy, ux, ui, ui/ux, interaction, interactive, interactive design, ecommerce, native app development app, iOS, Android, front-end development, creative development, visual coding, CSS3, HTML5"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_tadaim.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="flexy__item flexy--items-center flexy--justify-center flexy--column"> <section class="section flexy__item flexy--column flexy--items-center space--big"> <header class="accessible-hide"> <h2>Input Range</h2> </header> <article class="section__article flexy__item flexy--column flexy--items-center"> <header class="header space--medium"> <h3>It's 'em' sized, dude :D</h3> </header> <form class="flexy__item flexy--column flexy--items-center" id="range-cont"> <fieldset> <legend class="accessible-hide">Select a value</legend> <div class="range"> <input class="range__input" id="input-range" type="range" name="range-value" min="0" max="2016" value="0"/> <label class="range__tooltip" id="tooltip" for="input-range"><span class="range__tooltip__amount" id="tooltip-value">0</span></label> <div class="range__background" id="range__background"></div> </div> </fieldset> <div><span class="button" id="button" title="Switch size"> <svg class="fill--gray" xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 768 768"> <path d="M448 415.75q13.25 0 22.75 9.5L672 626.5V479.75q0-13.25 9.375-22.625T704 447.75t22.625 9.375T736 479.75v224q0 13.25-9.5 22.75t-22.75 9.5h-224q-13.25 0-22.625-9.375T447.75 704t9.375-22.625T479.75 672H626.5L425.25 470.75Q416 461 416 448q0-13.25 9.375-22.75t22.625-9.5zM64 32h224q13.25 0 22.625 9.375T320 64t-9.375 22.625T288 96H141.25L342.5 297q9.5 9.5 9.5 22.75t-9.5 22.625-22.75 9.375q-12.75 0-22.75-9.25L96 141.25V288q0 13.25-9.375 22.625T64 320t-22.625-9.375T32 288V64q0-13.25 9.375-22.625T64 32z"></path> </svg></span></div> </form> </article> </section> <header class="header"> <h1><a href="http://tadaima.studio" title="Go to Tadaima"> <svg class="logo-tadaima fill--white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 80 80"> <title>Tadaima Studio.</title> <desc>A group of digital interface crafters.</desc> <g> <rect class="st5" y="0" width="80" height="80"></rect> </g> <lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="27.7468" y1="18.248" x2="52.244" y2="42.7452"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10" points="52,27 25,27 25,23 55,23 55,31 40,31 40,54 "></polyline> <lineargradient id="SVGID_2_" gradientunits="userSpaceOnUse" x1="23.9948" y1="30.0043" x2="48.4901" y2="54.4996"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10" points="24,31 36,31 36,57 44,57 44,34 "></polyline> </svg></a></h1> </header>
</main>
<svg class="svg-bg" xmlns="http://www.w3.org/2000/svg"> <defs> <circle id="a" cx="1468" cy="133" r="35"></circle> <mask id="h" x="0" y="0" width="70" height="70" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> </mask> <circle id="b" cx="236.5" cy="732.5" r="23.5"></circle> <mask id="i" x="0" y="0" width="47" height="47" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> </mask> <circle id="c" cx="1120.5" cy="945.5" r="28.5"></circle> <mask id="j" x="0" y="0" width="57" height="57" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> </mask> <path id="d" d="M1193.375 302.875l44.6 77.25h-89.2z"></path> <mask id="k" x="0" y="0" width="89.201" height="77.25" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> </mask> <path id="e" d="M1610.8 513.3l34.14 59.128h-68.278z"></path> <mask id="l" x="0" y="0" width="68.277" height="59.13" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> </mask> <path id="f" d="M51.045 967.864l38.314 66.362H12.73z"></path> <mask id="m" x="0" y="0" width="76.629" height="66.362" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> </mask> <path id="g" d="M46.045 311.097l26.5 45.897H19.546z"></path> <mask id="n" x="0" y="0" width="52.997" height="45.897" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </mask> </defs> <g style="mix-blend-mode:overlay" fill="none" fill-rule="evenodd" opacity=".35" stroke="#FFF"> <use class="svg-bg_element" mask="url(#h)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> <use class="svg-bg_element" mask="url(#i)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> <use class="svg-bg_element opacity-anim" mask="url(#j)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> <path class="stroke-anim" d="M657.5 848.5l46 46" stroke-width="3" stroke-linecap="square"></path> <path d="M1360.5 1206.5l89-89M761.5 42.5l42-42" stroke-width="3" stroke-linecap="square"></path> <use class="svg-bg_element" mask="url(#k)" stroke-width="6" transform="rotate(90 1193.375 341.5)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> <use class="svg-bg_element" mask="url(#l)" stroke-width="6" transform="rotate(45 1610.8 542.863)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> <use class="svg-bg_element rotate-anim" mask="url(#m)" stroke-width="6" transform="rotate(45 51.045 1001.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> <use class="svg-bg_element" mask="url(#n)" stroke-width="6" transform="rotate(20 46.045 334.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </g>
</svg> <script src="js/index.js"></script>
</body>
</html>
Safe Range Tooltip - Script Codes CSS Codes
body { background-color: $gray; background-image: none;
}
fieldset { margin: 3em 0;
}
$tooltipBgColor: $white;
$tooltipColor: $gray;
$rangeTrackBg: $white;
$rangeTrackGradientFirst: darken($red, 05);
$rangeTrackGradientLast: lighten($coral, 05);
$rangeThumbSize: 1em;
$rangeTrackSize: $rangeThumbSize / 10;
$tooltipTriangleSize: $rangeThumbSize / 2;
$duration: .3s;
.range { &--big { font-size: 1.5em; } width: 15em; height: $rangeThumbSize * 3; position: relative; display: flex; align-items: center; justify-content: center; &__tooltip { height: $rangeThumbSize*3; line-height: 1em; position: absolute; background-color: $tooltipBgColor; left: 0; top: 0; transform: translate(0,-100%); transition: all 0s ease-in-out; &:after { content: ''; width: 0; height: 0; border: $tooltipTriangleSize solid transparent; border-top-color: $tooltipBgColor; position: absolute; bottom: -$tooltipTriangleSize * 1.8; left: 0; transform: translate(-50%, 0); } &--down { transform: translate(0,100%); &:after { border-top-color: transparent; border-bottom-color: $tooltipBgColor; bottom: 100%; transform: translate(-50%, 0); } } &__amount { // height: 3em; min-width: 3em; padding: 1em; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(calc(0% - #{$rangeThumbSize}), -50%); background-color: $tooltipBgColor; color: $tooltipColor; } } &__background { // z-index: 1; width: 100%; pointer-events: none; height: $rangeTrackSize; background-image: linear-gradient(90deg, $rangeTrackBg, $rangeTrackBg 50%, transparent 50%), linear-gradient(90deg, $rangeTrackGradientFirst, $rangeTrackGradientLast); background-size: 200% 100%, 100% 100%; background-position: 100% 0%, left top; background-repeat: no-repeat, no-repeat; } input[type=range] { -webkit-appearance: none; font-size: 1em; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; left: 0; top: 0; position: absolute; background-color: transparent; outline: none; transition: all $duration ease-in-out; @for $i from 0 through 100 { &[data-background-position='#{$i}'] { $resultColor: mix($rangeTrackGradientLast, $rangeTrackGradientFirst, $i); &::-ms-thumb { background-color: $resultColor; } &::-moz-range-thumb { background-color: $resultColor; } &::-webkit-slider-thumb { background-color: $resultColor; } } } &::-webkit-slider-runnable-track { height: $rangeTrackSize*10; background: transparent; border: 0; cursor: pointer; } &::-webkit-slider-thumb { -webkit-appearance: none; border: 0; height: $rangeThumbSize; width: $rangeThumbSize; border-radius: 50%; background: $rangeTrackBg; transform: translate(0,calc(-50% + #{$rangeTrackSize * 5})); z-index: 2; cursor: pointer; } &:focus { } &:focus::-webkit-slider-runnable-track { // background: #ccc; } &::-moz-range-track { height: $rangeTrackSize*10; background: transparent; border: 0; cursor: pointer; } &::-moz-range-thumb { border: 0; height: $rangeThumbSize; width: $rangeThumbSize; border-radius: 50%; background: $rangeTrackBg; z-index: 2; cursor: pointer; } &:-moz-focusring{ outline: none; } &::-ms-track { height: $rangeTrackSize*10; background: transparent; border: 0; cursor: pointer; } &::-ms-fill-lower { background: transparent; } &::-ms-fill-upper { background: transparent; } &::-ms-thumb { border: 0; height: $rangeThumbSize; width: $rangeThumbSize; padding: 0; margin: 0; background: $rangeTrackBg; transform: translate(0,0); cursor: pointer; } &:focus::-ms-fill-lower { // background: #888; } &:focus::-ms-fill-upper { // background: #ccc; } &::-ms-tooltip { display: none; } }
}
.button { cursor: pointer; display: flex; height: 3em; width: 3em; line-height: 1em; padding: 1em; border-radius: 50%; box-sizing: border-box; background-color: $white; transition: all $duration ease-in-out;
}
@media (max-width: 1024px) and (orientation: landscape) { .logo-tadaima { position: fixed; right: .5em; bottom: .5em; }
}
Safe Range Tooltip - Script Codes JS Codes
var range = document.getElementById('input-range'), rangeMax = range.getAttribute('max'), tooltip = document.getElementById('tooltip'), tooltipVal = document.getElementById('tooltip-value'), rangeCont = document.getElementById('range-cont'), button = document.getElementById('button'), rangeBg = document.getElementById('range__background'), thumbWidth = 16, tooltipOffset, tooltipValOffset, finalPos, valuePos; range.addEventListener('input', tooltipPos); button.addEventListener('click', switchSizes); function tooltipPos() { percentValue = ((range.value * 100) / rangeMax); tooltipVal.innerHTML = range.value; tooltipValOffset = calcEm((thumbWidth), 16) - (percentValue / 50); tooltip.setAttribute('style', calcPosContainer(range.value)); rangeBg.setAttribute('style', 'background-position: ' + (-percentValue) + '% 0%, left top;'); range.setAttribute('data-background-position', Math.ceil(percentValue)); tooltipVal.setAttribute('style', 'transform: translate(calc(-' + percentValue + '% - ' + tooltipValOffset + 'em), -50%);'); } function calcPosContainer(val) { valuePos = ((val * 100) / rangeMax); tooltipOffset = Math.ceil(thumbWidth / 2) - ((valuePos * thumbWidth) / 100); finalPos = 'left: calc(' + valuePos + '% + ' + calcEm(tooltipOffset, 16) + 'em);'; return finalPos; } function calcEm(pxSize, fontBase) { return (pxSize / fontBase); } function switchSizes() { rangeCont.classList.toggle('range--big'); } tooltipPos();
Developer | Tadaima |
Username | tadaima |
Uploaded | December 01, 2022 |
Rating | 3 |
Size | 100,215 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Logo Effect | 104,723 Kb |
Base Styles | 184,741 Kb |
Ratings Inspiration | 106,676 Kb |
CSS Random Mosaic | 107,691 Kb |
Bars Chart | 98,019 Kb |
Pure CSS Radial Chart | 105,429 Kb |
Infinite Calendar | 104,555 Kb |
CSS Preloaders | 97,977 Kb |
CSS Dropdown | 103,937 Kb |
HTML5 Video Player | 101,864 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Css3 slide | Nakome | 3,190 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!