Skip to content
Simon Tharby edited this page Sep 28, 2020 · 4 revisions

slider

initial_value, min, max and step will default to 50.0, 0.0, 100.0 & 0.01 respectively, if not included in args.
Input field can be used to set exact slider values.
Input field updates as slider is moved, but related parameter value is not set until slider is released (or entered in input field).

Format:

addSlider(name, parent, initial_value, min, max, step)

Example usage (see uiLayout.js for more examples):

let parent = document.getElementById("ui-container");

addSlider("parameter_A", parent, 3, 1, 5, 1);

Example of generated HTML:

<div class="sliderDiv" style="height: 50px; width: 100%;">
  <div class="sliderTopDiv">
    <p class="sliderText">parameter A:</p>
    <input class="sliderField" type="number" min="0" max="100" step="0.01">
  </div>
  <div class="sliderContainer">
    <div class="vertical-center">
      <input class="slider" id="parameter_A" type="range" min="0" max="100" step="0.01">
    </div>
  </div>
</div>
Clone this wiki locally