ctrl-panel

ctrl-panel range: default step=1 step=0.1 min-max knob: default step=1 step=0.1 min-max clamp: default init min-max radio-multiple: A B C D E F radio: A B C D E F others: vector text color theme: flat oldschool neumorphism [value]:
{
  "range": {
    "default": 5,
    "step-1": 6,
    "step-0.1": 7.1,
    "min-max": 50
  },
  "knob": {
    "default": 5,
    "step-1": 6,
    "step-0.1": 7.1,
    "min-max": 50
  },
  "clamp": {
    "default": [
      0,
      10
    ],
    "init": [
      3,
      6
    ],
    "step": [
      10,
      30
    ]
  },
  "radio-multiple": [
    "d",
    "f"
  ],
  "radio": "c",
  "others": {
    "vector": [
      0.7071067811865476,
      0.7071067811865475
    ],
    "text": "ctrl-panel",
    "color": "#800080"
  },
  "theme": "flat"
}
Element Description Live Demo
<ctrl-panel> The root element. demo
<ctrl-group> Group ctrl-* together to shape the value. demo
<ctrl-slider> A numblic slider. demo
<ctrl-clamp> Select a tuple low-high value. demo
<ctrl-switch> A ON/OFF switch. demo
<ctrl-radio> Multiple/Single switch. demo
<ctrl-vector> Select a tuple vector on a 2D surface. demo
<ctrl-text> Text input. demo
<ctrl-color> Color picker. demo