Skip to content

Instantly share code, notes, and snippets.

@jigneshk5

jigneshk5/index.html

Created August 22, 2021 21:53
Show Gist options
  • Save jigneshk5/debe56fa90515481112791fb4a9e13a2 to your computer and use it in GitHub Desktop.
Save jigneshk5/debe56fa90515481112791fb4a9e13a2 to your computer and use it in GitHub Desktop.
Download ZIP
Input Range iOS - Apple Style
Raw
index.html
<body ontouchstart="" draggable="false">
<div class="container-slides">
<div class="slider tv">
<div class="info-sl">
<div class="icon">
<svg width="32" height="32">
<use xlink:href="#tv"/>
</svg>
</div>
<div class="text-sl">
<h1>Smart TV</h1>
<p class="desc">Unavailable</p>
</div>
</div>
<div class="">
<!-- <input type="range" class="range" min="0" max="100" step="1"> -->
</div>
</div>
<div class="slider lamp">
<input type="checkbox" id="lamp" class="hide checkbox" checked>
<div class="info-sl">
<label for="lamp" class="icon">
<svg width="32" height="32" class="on">
<use xlink:href="#light-bulb"/>
</svg>
<svg width="32" height="32" class="off">
<use xlink:href="#bulb"/>
</svg>
</label>
<div class="text-sl">
<h1>Living Room Light</h1>
<p class="desc on">Opening</p>
<p class="desc off">Turned off</p>
</div>
</div>
<div class="range-hold">
<input type="range" class="range" min="0" max="100" step="1" value="20">
</div>
</div>
<div class="slider air">
<div class="info-sl">
<div class="icon">
<svg width="32" height="32">
<use xlink:href="#weather"/>
</svg>
</div>
<div class="text-sl">
<h1>Air Conditioner</h1>
<p class="desc">Running</p>
</div>
</div>
<div class="rangi">
<input type="range" class="range" min="0" max="100" step="1">
</div>
</div>
</div>
<svg class="hide">
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="light-bulb">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
</symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="plus">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
</symbol>
<symbol id="close"viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</symbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="beaker">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</symbol>
<symbol id="lightning" fill="currentColor" stroke="currentColor" viewBox="0 0 21 21"
xmlns="http://www.w3.org/2000/svg">
<path d="m6.5 7.5h4l-6 9v-6.997l-4-.003 6-9z" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 2)"/>
</symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="finger-print">
<path fill-rule="evenodd" d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z" clip-rule="evenodd"></path>
</symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="terminal">
<path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
</symbol>
<symbol id="apps" viewBox="0 0 24 24" fill="none">
<path d="M8 6C8 7.10457 7.10457 8 6 8C4.89543 8 4 7.10457 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6Z" fill="currentColor"/>
<path d="M8 12C8 13.1046 7.10457 14 6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12Z" fill="currentColor"/>
<path d="M6 20C7.10457 20 8 19.1046 8 18C8 16.8954 7.10457 16 6 16C4.89543 16 4 16.8954 4 18C4 19.1046 4.89543 20 6 20Z" fill="currentColor"/>
<path d="M14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6Z" fill="currentColor"/>
<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="currentColor"/>
<path d="M14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18Z" fill="currentColor"/>
<path d="M18 8C19.1046 8 20 7.10457 20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6C16 7.10457 16.8954 8 18 8Z" fill="currentColor"/>
<path d="M20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z" fill="currentColor"/>
<path d="M18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20Z" fill="currentColor"/>
</symbol>
<symbol id="border" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 11H1V13H3V11Z" fill="currentColor"/>
<path d="M7 11H5V13H7V11Z" fill="currentColor"/>
<path d="M9 11H11V13H9V11Z" fill="currentColor"/>
<path d="M15 11H13V13H15V11Z" fill="currentColor"/>
<path d="M17 11H19V13H17V11Z" fill="currentColor"/>
<path d="M23 11H21V13H23V11Z" fill="currentColor"/>
</symbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="chip">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
<symbol fill="currentColor" viewBox="0 0 20 20" id="bulb"
xmlns="http://www.w3.org/2000/svg">
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path>
</symbol>
<symbol viewBox="0 0 24 24" id="tv" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></symbol>
<symbol fill="currentColor" xmlns="http://www.w3.org/2000/svg" id="weather" enable-background="new 0 0 512 512" viewBox="0 0 512 512"><g><path d="m497 241h-23.315l11.428-19.794c4.143-7.174 1.685-16.349-5.49-20.49-7.175-4.144-16.349-1.685-20.49 5.49l-20.089 34.794h-146.831l103.826-103.826 38.807 10.398c1.301.349 2.607.516 3.893.516 6.622 0 12.684-4.42 14.479-11.121 2.144-8.002-2.604-16.228-10.606-18.372l-22.078-5.916 15.072-15.072c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0l-15.073 15.073-5.916-22.078c-2.145-8.002-10.367-12.744-18.372-10.606-8.002 2.145-12.75 10.37-10.605 18.372l10.398 38.808-103.825 103.824v-146.832l34.794-20.088c7.174-4.142 9.633-13.315 5.49-20.49-4.143-7.176-13.317-9.633-20.49-5.49l-19.794 11.428v-23.314c0-8.284-6.716-15-15-15s-15 6.716-15 15v481.998c0 8.284 6.716 15 15 15s15-6.716 15-15v-23.313l19.794 11.428c2.362 1.364 4.941 2.013 7.486 2.013 5.184 0 10.226-2.691 13.004-7.503 4.143-7.175 1.684-16.349-5.49-20.49l-34.794-20.089v-146.832l103.825 103.825-10.398 38.809c-2.144 8.002 2.605 16.227 10.607 18.371 1.301.348 2.606.515 3.892.515 6.622 0 12.684-4.421 14.479-11.122l5.915-22.077 15.072 15.072c2.929 2.929 6.768 4.394 10.606 4.394s7.678-1.465 10.606-4.394c5.858-5.857 5.858-15.355 0-21.213l-15.073-15.073 22.079-5.916c8.002-2.145 12.75-10.37 10.606-18.372-2.145-8.002-10.367-12.75-18.372-10.605l-38.808 10.398-103.823-103.825h146.832l20.088 34.794c2.778 4.813 7.82 7.503 13.004 7.503 2.545 0 5.124-.648 7.486-2.013 7.174-4.142 9.633-13.315 5.49-20.49l-11.427-19.794h23.314c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m78.054 256c0-8.284-6.716-15-15-15h-48.054c-8.284 0-15 6.716-15 15s6.716 15 15 15h48.054c8.284 0 15-6.716 15-15z"/><path d="m108.96 130.173c2.929 2.93 6.768 4.394 10.606 4.394s7.678-1.465 10.606-4.394c5.858-5.857 5.858-15.354 0-21.213l-33.978-33.98c-5.856-5.858-15.354-5.858-21.213 0-5.858 5.857-5.858 15.354 0 21.213z"/><path d="m108.96 381.827-33.979 33.979c-5.858 5.857-5.858 15.355 0 21.213 2.929 2.929 6.768 4.394 10.606 4.394s7.678-1.465 10.606-4.394l33.979-33.979c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.212 0z"/><path d="m169.781 82.739c2.359 5.838 7.979 9.382 13.911 9.382 1.872 0 3.775-.353 5.617-1.098 7.68-3.104 11.39-11.848 8.284-19.528l-18.01-44.552c-3.104-7.68-11.849-11.391-19.528-8.284-7.68 3.104-11.39 11.848-8.284 19.528z"/><path d="m91.023 322.69c-3.104-7.68-11.849-11.39-19.528-8.284l-44.551 18.01c-7.68 3.104-11.39 11.848-8.284 19.528 2.36 5.838 7.979 9.382 13.911 9.382 1.872 0 3.775-.353 5.617-1.098l44.551-18.01c7.68-3.104 11.39-11.847 8.284-19.528z"/><path d="m188.522 420.655c-7.668-3.141-16.426.527-19.568 8.191l-18.223 44.465c-3.142 7.666.526 16.427 8.191 19.568 1.862.763 3.788 1.124 5.683 1.124 5.906 0 11.507-3.513 13.886-9.315l18.223-44.465c3.141-7.665-.526-16.426-8.192-19.568z"/><path d="m27.313 178.491 44.465 18.222c1.861.763 3.787 1.124 5.682 1.124 5.907 0 11.507-3.512 13.886-9.316 3.142-7.665-.526-16.426-8.192-19.567l-44.465-18.222c-7.664-3.141-16.426.526-19.567 8.192-3.143 7.665.524 16.426 8.191 19.567z"/><path d="m106 256c0 66.967 44.115 123.82 104.808 143.038v-286.076c-60.693 19.218-104.808 76.071-104.808 143.038z"/></g></symbol>
</svg>
</body>
Raw
script.js
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
Raw
style.scss
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
:root {
--bg-page: #181818;
--text-color: #f9f9f9;
--blue: #0870f8;
--blue-rgb: 8, 112, 248;
--input-size: 70px;
--border: #343434;
--g-purple: linear-gradient(30deg, #85f, #9966ff);
--g-yellow: linear-gradient(30deg, #fc0, #fc0);
--g-red: linear-gradient(30deg, #f36, #f24);
--g-blue: linear-gradient(30deg, #0cf, #0af);
--g-purple: linear-gradient(30deg, #85f, #9966ff);
}
* {
box-sizing: border-box;
font-family: "Inter var", sans-serif;
font-size: 16px;
font-weight: 400;
user-select: none;
transition: all 200ms ease;
}
html, body, .full-width {
height: 100%;
}
body {
&, html {
margin: 0;
padding: 0;
}
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background:var(--bg-page);
color:var(--text-color);
}
.hide {
display: none;
visibility: hidden;
height: 0;
}
.container-slides {
max-width: 700px;
padding: 0 10px;
}
.display-flex {
display: flex;
width: 100%;
max-width: 400px;
}
.tip {
color: #fff;
font-variation-settings: 600;
font-weight: 600;
font-size: 13px;
}
.slider{
--bg: #3D5AFE;
max-width: 400px;
display: block;
width: 400px;
margin: 10px auto;
background: var(--bg);
padding: 15px 20px;
border-radius: 35px;
&.lamp {
background: var(--g-yellow);
color: var(--bg-page);
.range::-webkit-slider-thumb {
box-shadow: -400px 400px 0 400px var(--bg-page);
background: var(--bg-page);
}
.range::-moz-range-thumb {
box-shadow: -275px 36px 0 275px var(--bg-page);
background: var(--bg-page);
}
.icon, .range {
&:focus, &:active {
background: rgba(0,0,0, .08);
}
background: rgba(0,0,0, .08);
}
.desc {
color: rgba(0,0,0, .5);
}
}
&.air {
background: var(--g-purple);
}
}
.info-sl {
display: flex;
align-items: center;
}
.text-sl {
margin-left: 15px;
h1 {
font-size: 1.7rem;
font-weight: 700;
font-variation-settings: 'wght' 700;
margin:0;
}
.desc {
margin: 0;
font-size: 14px;
color: rgba(255,255,255, .5);
}
}
.icon {
--size: 64px;
width: var(--size);
height: var(--size);
display: flex;
align-items:center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255, .08);
}
.range {
--range-bg: #3D5AFE;
margin-top: 25px;
display: inline-block;
width: 100%;
height: var(--input-size);
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: rgba(255,255,255, .08);
outline: none;
border-radius: 28px;
overflow:hidden;
box-shadow: 0 0 0 2px transparent;
&:focus, &:active {
background: rgba(255,255,255, .08);
}
&[value="0"] {
&::-webkit-slider-thumb, &::-moz-range-thumb {
background: transparent!important;
}
}
}
.off {
display: none;
}
.range-hold {
transition: all 2s ease;
}
input[type="checkbox"]:checked {
& ~ .range-hold {
display: none;
}
& ~ .info-sl {
.icon {
.on {
display: none;
}
.off {
display: block;
}
}
.text-sl {
.on {
display: none;
}
.off {
display: block;
}
}
}
}
.icon {
position: relative;
cursor: pointer;
@media (hover: hover) {
&:hover{
background: rgba(0,0,0, .1)!important;
}
}
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 3px;
position:relative;
height: var(--input-size);
background: #fff;
outline: none;
border:none;
cursor: pointer;
box-shadow: -400px 400px 0 400px #fff;
transition: all 1s ease;
}
.range::-moz-range-thumb {
box-shadow: -275px 36px 0 275px #fff;
appearance: none;
width: 3px;
position:relative;
height: var(--input-size);
background: #fff;
outline: none;
border:none;
cursor: pointer;
transition: all 1s ease;
}
@keyframes opacity {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes height {
from { height: 0; }
to { height: auto; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment