| <div class="container"> | |
| <div class="components"> | |
| <div class="switch"> | |
| <div class="switch__1"> | |
| <input id="switch-1" type="checkbox"> | |
| <label for="switch-1"></label> | |
| </div> | |
| <div class="switch__2"> |
| <div id="clock" class="progress-clock"> | |
| <button class="progress-clock__time-date" data-group="d" type="button"> | |
| <small data-unit="w">Sunday</small><br> | |
| <span data-unit="mo">January</span> | |
| <span data-unit="d">1</span> | |
| </button> | |
| <button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">12</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m" data-group="m" type="button">00</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">00</button> | |
| <span class="progress-clock__time-ampm" data-unit="ap">AM</span> | |
| <svg class="progress-clock__rings" width="256" height="256" viewBox="0 0 256 256"> | |
| <defs> |
| <div class="container"> | |
| <div class="sidebar"> | |
| <span class="logo">S</span> | |
| <a class="logo-expand" href="#">skateboard</a> | |
| <div class="side-wrapper"> | |
| <div class="side-title">MENU</div> | |
| <div class="side-menu"> | |
| <a class="sidebar-link discover is-active" href="#"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" /> |
| <div class="container"> | |
| <div class="sidebar"> | |
| <span class="logo">S</span> | |
| <a class="logo-expand" href="#">skateboard</a> | |
| <div class="side-wrapper"> | |
| <div class="side-title">MENU</div> | |
| <div class="side-menu"> | |
| <a class="sidebar-link discover is-active" href="#"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" /> |
Stunned to see Ana Tudor's collection of single-element range sliders. I'm stocked that she started updating a few of her slider demos
I thought about building something more out of a single <input> tag. So, I made this Knob widget 😄
I also added a transition to make the thumb pseudo-element bouncy
The Knob design is based on this image
| <div class="container" x-data="{ rightSide: false, leftSide: false }"> | |
| <div class="left-side" :class="{'active' : leftSide}"> | |
| <div class="left-side-button" @click="leftSide = !leftSide"> | |
| <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> | |
| <svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"> | |
| <path d="M19 12H5M12 19l-7-7 7-7"/> | |
| </svg> | |
| </div> | |
| <div class="logo">ULTRANET</div> | |
| <div class="side-wrapper"> |
| <div class="wrapper" id="app"> | |
| <div class="player"> | |
| <div class="player__top"> | |
| <div class="player-cover"> | |
| <transition-group :name="transitionName"> | |
| <div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div> | |
| </transition-group> | |
| </div> | |
| <div class="player-controls"> | |
| <div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite"> |
| name: Find text matches within a worksheet | |
| description: Finds cells within a worksheet based on string matching. | |
| host: EXCEL | |
| api_set: {} | |
| script: | |
| content: | | |
| $("#setup").click(() => tryCatch(setup)); | |
| $("#findCompleted").click(() => tryCatch(findCompleted)); | |
| $("#findDelayed").click(() => tryCatch(findDelayed)); | |
| $("#findCanceled").click(() => tryCatch(findCanceled)); |