<a class='testSubject' href='https://github.com/yairEO/knobs' target='_blank'>
  Get Knobs
</a>
.testSubject{
  display: var(--hide, grid);
  background: var(--bg, red);
  border-radius: var(--radius, 0);
  width: var(--width, 200px);
  height: var(--height, 200px);
  
  color: #333;
  text-decoration: none;
  
  overflow: hidden;
  place-items: center;
  font: 700 2.2rem 'Oleo Script', Arial;
}


// irrelevant stuff:

@keyframes highlight{
  0%{ opacity:0; transform:translateX(-3ch); }
  20%{ opacity:1; transform:none; }
  40%{ transform:translateX(-1ch); }
  55%{ transform:none; }
  70%{ opacity:1; transform:translateX(-.6ch); }
  100%{ opacity:0; transform:translateX(0); }
}


////////
body{
  height: 100vh;
  display: grid;
  place-items: center;
  cursor: crosshair;
  background: var(--main-bg);
  
  &::before{
    content: '👉';
    position: fixed;
    top: -.2ch;
    right: 1.5ch;
    font-size: 3em;
    animation: highlight 2s forwards ease;
  }
}
View Compiled
//
// https://github.com/yairEO/knobs
// 

var settings = {
  theme: {
    // flow: 'compact',
    // position: 'bottom left', // default
    // RTL: true
    // mode: 'light'
  },
  // live: false, // should update immediately (default true)
  visible: 0, // 0 - starts as hidden, 1 - starts as visible, 2 - always visible
  CSSVarTarget: document.querySelector('.testSubject'), 
  
  knobs: [
    {
      cssVar: ['width', 'px'],
      label: 'Width',
      type: 'range',
      value: 200,
      min: 0,
      max: 500,
      step: 50,
      onChange: console.log
    },
    {
      cssVar: ['height', 'vh'],
      label: 'Height',
      type: 'range',
      value: 20,
      min: 0,
      max: 100,
      onChange: console.log
    },
    
    "Label Example",
    {
      cssVar: ['radius', '%'],
      label: 'Radius of the big square here',
      type: 'range',
      value: 0,
      min: 0,
      max: 50,
      onChange: console.log
    },
    {
      cssVar: ['bg'], // alias for the CSS variable
      label: 'Color',
      type: 'color',
      value: '#45FDA9',
      onChange: console.log
    },
    {
      cssVar: ['main-bg', null, document.body], // [alias for the CSS variable, units, applies on element]
      label: 'Background',
      type: 'color',
      value: '#FFFFFF',
      onChange: console.log
    },
    {
      cssVar: ['hide'], // alias for the CSS variable
      label: 'Hide',
      type: 'checkbox',
      // checked: true,
      value: 'none',
      onChange: console.log
    }
  ]
}

var myKnobs = new Knobs(settings)

// Add more knobs after initialization 
myKnobs.knobs = [...myKnobs.knobs, ...[
  "Knobs Self Parameters",
    {
      label: 'Compact View',
      type: 'checkbox',
      value: 'none',
      checked: myKnobs.settings.theme.flow == 'compact',
      onChange: e => {
        if(myKnobs){ 
          myKnobs.DOM.scope[`${(e.target.checked ? "set" : "remove")}Attribute`]("data-flow", "compact")
          setTimeout(()=> {
              myKnobs.calculateGroupsHeights()
              myKnobs.toggle(myKnobs.state.visible)
          }, 300)
        }
      }
    },
    {
      cssVar: ['knobs-gap', 'px'],
      label: 'Space between knobs',
      type: 'range',
      value: 3,
      min: 0,
      max: 10,
      step: 1,
      onChange: e => {
        if(myKnobs){ 
          myKnobs.DOM.scope.style.setProperty(`--knobs-gap`, `${e.target.value}px`)
          myKnobs.calculateGroupsHeights()
          myKnobs.toggle(myKnobs.state.visible)
        }
      }
    },
    {
      cssVar: ['background', null, myKnobs.DOM.scope],
      label: 'Knobs Background',
      type: 'color',
      value: '#000000'
    },
    {
      cssVar: ['primaryColor', null, myKnobs.DOM.scope],
      label: 'Slider Color',
      type: 'color',
      value: '#0366D6'
    },
    {
      cssVar: ['textColor', null, myKnobs.DOM.scope],
      label: 'Text Color',
      type: 'color',
      value: '#FFFFFF',
    
    }
]]

myKnobs.render()

// open knobs after some delay
setTimeout(myKnobs.toggle.bind(myKnobs), 1600)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@yaireo/knobs@0.2.1