@navelpluisje/pcb-components/src/trimmer/trimmer.css

A library with native components. They are all pcb components, like a dip-switch, resitor etc.

.trimmer {
  --background: hsl(0, 0%, 100%);
  --knob-size: 4rem;
  --switch-bg: hsl(var(--switch-color), var(--switch-saturation), 50%);
  --switch-shadow: hsl(var(--switch-color), var(--switch-saturation), 35%);
  --switch-shadow-fine: hsl(var(--switch-color), var(--switch-saturation), 45%);
  --switch-text-color: hsl(0, 0%, 100%);
  --switch-switch-color: hsl(var(--switch-color), 0%, 100%);
  --switch-switch-shadow: hsl(var(--switch-color), 0%, 67%);
  --switch-switch-shadow-fine: hsla(var(--switch-color), 0%, 27%);

  background-color: var(--switch-bg);
  display: inline-block;
  height: calc(var(--knob-size) * 1.1);
  margin-bottom: 1rem;
  position: relative;
  width: var(--knob-size);
}

.trimmer:focus {
  background-color: hsl(var(--switch-color), var(--switch-saturation), 60%);
  outline: none;
}

.trimmer::before,
.trimmer::after {
  background-color: var(--switch-shadow);
  content: '';
  display: block;
  position: absolute;
  transform-origin: top left;
}

.trimmer::before {
  height: 100%;
  left: 100%;
  top: 0;
  transform: skewY(60deg);
  width: .15rem;
}

.trimmer::after {
  height: .25rem;
  left: 0;
  top: 100%;
  transform: skewX(30deg);
  width: 100%;
}

.trimmer:focus::before,
.trimmer:focus::after {
  background-color: hsl(var(--switch-color), var(--switch-saturation), 45%);
}

.trimmer-chip {
  background-color: var(--switch-shadow-fine);
  border-color: var(--switch-shadow) transparent transparent var(--switch-shadow);
  border-style: solid;
  border-width: .125rem 0 0 .0625rem;
  bottom: 0;
  content: '';
  display: block;
  height: .25rem;
  left: calc(25% - .0625rem);
  position: absolute;
  width: calc(50% + .0625rem);
}

.trimmer:focus .trimmer-chip {
  background-color: var(--switch-bg);
  border-color:
    hsl(var(--switch-color), var(--switch-saturation), 45%)
    transparent
    transparent
    hsl(var(--switch-color), var(--switch-saturation), 45%);
}

.trimmer-chip::before {
  background-color: inherit;
  content: '';
  display: block;
  height: .125rem;
  left: 0;
  position: absolute;
  top: 100%;
  transform: skewX(30deg);
  transform-origin: top left;
  width: 100%;
  z-index: 1;
}

.trimmer-ring {
  background-color: var(--switch-bg);
  background-image:
    radial-gradient( var(--switch-bg) 55.7%, transparent 55.7%, transparent 70.7%, var(--switch-bg) 70.7%),
    linear-gradient(0deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),
    linear-gradient(15deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(30deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(45deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),
    linear-gradient(60deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(75deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),
    linear-gradient(105deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(120deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(135deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),
    linear-gradient(150deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),
    linear-gradient(165deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: calc(var(--knob-size) * .75);
  border-radius: 50%;
  height: calc(var(--knob-size) * .75);
  left: calc(var(--knob-size) * .125);
  margin-bottom: 1rem;
  position: absolute;
  top: calc(var(--knob-size) * .125);
  width: calc(var(--knob-size) * .75);

}

.trimmer-ring::before,
.trimmer-ring::after {
  content: '';
  display: block;
  position: absolute;
}

.trimmer-ring::before {
  border-color: transparent transparent var(--switch-bg);
  border-style: solid;
  border-width: 0 calc(var(--knob-size) * .75 / 2 - 3px) calc(var(--knob-size) * .75 / 2 - 3px);
  bottom: 0;
  height: 0;
  left: 3px;
  width: 0;
  z-index: 0;
}

.trimmer:focus .trimmer-ring::before {
  border-color: transparent transparent hsl(var(--switch-color), var(--switch-saturation), 60%);
}

.trimmer-ring::after {
  color: var(--switch-shadow);
  content: attr(data-label);
  font-family: monospace;
  font-size: .5rem;
  right: -.375rem;
  text-shadow: 1px 1px 0 var(--switch-shadow-fine);
  text-transform: uppercase;
  top: -.375rem;
}

.trimmer-knob {
  background-clip: content-box;
  background-color: #eee;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: var(--knob-size);
  padding: 1rem;
  position: relative;
  transition: transform .15s ease;
  width: var(--knob-size);
}

.trimmer-knob::before,
.trimmer-knob::after {
  content: '';
  display: block;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.trimmer-knob::after {
  border-color: transparent transparent var(--switch-switch-shadow);
  border-style: solid;
  border-width: 0 .5rem .6rem;
  height: 0;
  top: 1rem;
  width: 0;
}

.trimmer-knob::before {
  background-color: var(--switch-switch-shadow);
  box-shadow: -.05rem -.05rem 0 0 hsla(0, 0%, 0%, 0.3) inset;
  height: 1.75rem;
  top: 1.25rem;
  width: .4rem;
}

.value {
  bottom: .4rem;
  color: white;
  font-family: monospace;
  font-size: .8rem;
  position: absolute;
  text-align: center;
  width: 100%;
}