bx-hueslider.css

/*
 * @copyright
 *   © 2012-2015 Jarosław Foksa
 */

:host {
  width: 100px;
  height: 35px;
  display: block;
}

main {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: relative;
}

canvas {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

#marker {
  width: 12px;
  height: calc(100% - 2px);
  position: absolute;
  bottom: 0%;
  left: 0%;
  transform: translateX(-8px);
  pointer-events: none;
  outline: 1px solid black;
  border: 1px solid white;
}