sclass HSlider {
  S id = aGlobalID(), name, label, unit;
  double min, max, value, step = 1;
  bool useWebSocket = true;
  
  !include #1028121 // setField + change()

  bool requiresWebSocket() { true; }
  
  // ID of numerical value display
  S valueID() { ret id + "_value"; }

  S html() {
    ret div(span(str(value), id := valueID())
      + prependSpaceIfNempty(unit), style := "width: 8ch; display: inline-block; text-align: right")
      + " " + tag input("", type := "range", +id, +name, +min, +max, +value, +step,
      oninput := !useWebSocket ? null : jsDollarVars([[
        document.getElementById($valueID).innerHTML = this.value;
        if (typeof wsSend !== 'undefined')
          wsSend(JSON.stringify({sliderValue: {id: $id, value: this.value}}));
      ]], +id, +valueID()))
      + " " + hlabelFor(id, label);
  }
  
  void onWebSocketJSON(Map map) {
    Map map2 = optCast Map(map.get("sliderValue")), ret if null;
    S id = cast map2.get("id");
    if (!eq(id, this.id)) ret;
    Number value = cast map2.get("value");
    setField(value := toDouble(value));
  }
}