<div id="root">
  <div class="ga-definitions ga-paint">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none" aria-hidden="true">
      <defs>
        <pattern id="ga-svg-0" x="17.857142857142858" y="32.857142857142854" width="134.78571428571428" height="134.28571428571428" viewBox="17.857142857142858 32.857142857142854 134.78571428571428 134.28571428571428" preserveAspectRatio="none" patternUnits="userSpaceOnUse" overflow="hidden">
          <g fill="rgb(124 136 153 / 0.68)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
            <path d="M 25 78 L 58 78 L 100 40 L 100 160 L 58 122 L 25 122 Z M 119 72 Q 143 100 119 128 L 130 136 Q 161 100 130 64 Z "/>
          </g>
        </pattern>
        <pattern id="ga-svg-1" x="18.75" y="33.75" width="168.50000000000003" height="132.5" viewBox="18.75 33.75 168.50000000000003 132.5" preserveAspectRatio="none" patternUnits="userSpaceOnUse" overflow="hidden">
          <g fill="rgb(124 136 153 / 0.68)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
            <path d="M 25 78 L 58 78 L 100 40 L 100 160 L 58 122 L 25 122 Z M 119 72 Q 143 100 119 128 L 130 136 Q 161 100 130 64 Z M 145 49 Q 188 100 145 151 L 155 160 Q 207 100 155 40 Z"/>
          </g>
        </pattern>
      </defs>
    </svg>
  </div>
  <div class="cool-satin-panel ga-shared"></div>
  <div class="horizontal-volume-rail ga-shared">
    <div class="horizontal-volume-rail-rounded">
      <div class="horizontal-volume-rail-outer-shadow ga-paint"></div>
      <div class="horizontal-volume-rail-clip">
        <div class="horizontal-volume-rail-content">
          <div class="horizontal-volume-rail-paint"></div>
        </div>
      </div>
      <div class="horizontal-volume-rail-inner-shadow ga-paint"></div>
    </div>
  </div>
  <div class="loud-speaker ga-svg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
      <rect style="x: 25px; width: 156.00000000000003px; y: 40px; height: 120px;" fill="url(#ga-svg-1)"/>
    </svg>
  </div>
  <div class="quiet-speaker ga-svg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
      <rect style="x: 25px; width: 120.5px; y: 40px; height: 120px;" fill="url(#ga-svg-0)"/>
    </svg>
  </div>
  <div class="polished-volume-thumb ga-shared">
    <div class="polished-volume-thumb-rounded">
      <div class="polished-volume-thumb-outer-shadow ga-paint"></div>
      <div class="polished-volume-thumb-clip">
        <div class="polished-volume-thumb-content">
          <div class="polished-volume-thumb-paint"></div>
        </div>
      </div>
      <div class="polished-volume-thumb-inner-shadow ga-paint"></div>
    </div>
  </div>
</div>

#root {
  width: 600px;
  height: 220px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#root .ga-paint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#root .ga-shared {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

#root .ga-svg {
  position: absolute;
  pointer-events: none;
}

#root .cool-satin-panel {
  background: linear-gradient(150deg, rgb(213 224 226) 0%, rgb(187 201 208) 38%, rgb(138 147 163) 100%) 0 0 / 600px 220px no-repeat;
}

#root .horizontal-volume-rail-rounded {
  position: absolute;
  left: 91px;
  width: 419.00000000000006px;
  top: 106px;
  height: 7px;
  border-radius: 3.5px 3.5px 3.5px 3.5px;
}

#root .horizontal-volume-rail-outer-shadow {
  border-radius: 3.5px 3.5px 3.5px 3.5px;
  box-shadow: 0px 1.5px 1px 1px rgb(237 243 244 / 0.7), 0px -1px 2px 1px rgb(69 81 95 / 0.22);
}

#root .horizontal-volume-rail-clip {
  position: absolute;
  inset: 0;
  border-radius: 3.5px 3.5px 3.5px 3.5px;
  overflow: hidden;
}

#root .horizontal-volume-rail-content {
  position: absolute;
  left: calc(-1 * 91px);
  top: calc(-1 * 106px);
  width: 600px;
  height: 220px;
}

#root .horizontal-volume-rail-paint {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(65 73 83) 0%, rgb(81 93 102) 35%, rgb(108 120 131) 100%) 91px 106px / 419px 7px no-repeat;
}

#root .horizontal-volume-rail-inner-shadow {
  border-radius: 3.5px 3.5px 3.5px 3.5px;
  box-shadow: inset 1px 1px 2px 0px rgb(37 44 56 / 0.65);
}

#root .loud-speaker {
  left: 521px;
  width: max(0px, 32px);
  top: 94px;
  height: max(0px, 32px);
}

#root .quiet-speaker {
  left: 48px;
  width: max(0px, 28px);
  top: 96px;
  height: max(0px, 28px);
}

#root .polished-volume-thumb-rounded {
  position: absolute;
  left: 123px;
  width: 56px;
  top: 82px;
  height: 56px;
  border-radius: 56px 56px 56px 56px;
}

#root .polished-volume-thumb-outer-shadow {
  border-radius: 56px 56px 56px 56px;
  box-shadow: 0px 2px 2px 0px rgb(29 37 48 / 0.68), 0px 6px 10px -1px rgb(40 50 65 / 0.35);
}

#root .polished-volume-thumb-clip {
  position: absolute;
  inset: 0;
  border-radius: 56px 56px 56px 56px;
  overflow: hidden;
}

#root .polished-volume-thumb-content {
  position: absolute;
  left: calc(-1 * 123px);
  top: calc(-1 * 82px);
  width: 600px;
  height: 220px;
}

#root .polished-volume-thumb-paint {
  position: absolute;
  inset: 0;
  background: conic-gradient(rgb(166 175 184) 0%, rgb(212 220 225) 8%, rgb(247 250 248) 17%, rgb(154 165 176) 25%, rgb(189 199 205) 33%, rgb(246 248 243) 43%, rgb(146 158 170) 50%, rgb(203 212 217) 58%, rgb(245 248 246) 66%, rgb(146 158 170) 75%, rgb(185 196 205) 83%, rgb(233 238 235) 93%, rgb(166 175 184) 100%) 123px 82px / 56px 56px no-repeat;
}

#root .polished-volume-thumb-inner-shadow {
  border-radius: 56px 56px 56px 56px;
  box-shadow: inset 1px 1px 1px 0px rgb(255 255 255 / 0.95), inset -1px -1px 1px 0px rgb(59 70 86 / 0.55), inset 0px 0px 0px 1px rgb(231 238 241 / 0.45);
}

Comments (0)

Satin Metal - Horizontal Volume Slider

Yoav Kadosh

Horizontal volume slider after the reference: a silver rotary-finished thumb, recessed graphite rail and understated speaker marks.

metal slider volume skeuomorphic

Colors

Views

Code size

7.11 KB

Layers

Layers (7)

Polished volume thumb

Folder

Brushed aluminum face

conic

Quiet speaker

shape

Loud speaker

shape

Horizontal volume rail

Folder

Recessed graphite channel

linear

Cool satin panel

linear

Explore

Community

Social

GRADIENT

.ART

css

Advanced CSS Gradient Editor

Designed & Developed by Yoav Kadosh