Class SliderControl

Example

// example.t
class Example {
  value = 7;
  values = [0, 2, 5, 20, 100];
}
Copy

<!-- example.html -->
<slider-control value.two-way="value" values.bind="values">
  <normal-text value="Limit file size to"></normal-text>
  <value-text value.bind="value | formatFileSize"></value-text>
  <normal-text value="."></normal-text>
</slider-control>
Copy

To create dependent min/max sliders the minimum and maximum values can be bound to the corresponding sliders:

<slider-control value.two-way="value" values.bind="minSize" max.bind="maxSize">
  <normal-text value="Files must have a size of at least"></normal-text>
  <value-text value.bind="value | formatFileSize"></value-text>
  <normal-text value="."></normal-text>
</slider-control>
<slider-control value.two-way="value" values.bind="maxSize" min.bind="minSize">
  <normal-text value="Files can have a size of up to"></normal-text>
  <value-text value.bind="value | formatFileSize"></value-text>
  <normal-text value="."></normal-text>
</slider-control>
Copy