Components chevron_right Slider

GitHub

Basic Usage

RGB      

R
73
G
174
B
43

Rating: /5 - demo of theming classes

default
3
md-warn
2
md-primary
4

Disabled

brightness_low
22
70

Disabled, Discrete
6

Template

<h2>
  RGB <span style={{this.colorStyle}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</h2>

<div class="layout layout-align-center-center slider-container">
  <span>R</span>
  <PaperSlider @class="flex" @min={{0}} @max={{255}} @value={{this.color.red}} @onChange={{action (mut this.color.red)}} />
  <PaperInput @type="number" @value={{this.color.red}} @onChange={{action (mut this.color.red)}} />
</div>

<div class="layout layout-align-center-center slider-container">
  <span>G</span>
  <PaperSlider @class="flex md-accent" @min={{0}} @max={{255}} @value={{this.color.green}} @onChange={{action (mut this.color.green)}} />
  <PaperInput @type="number" @value={{this.color.green}} @onChange={{action (mut this.color.green)}} />
</div>

<div class="layout layout-align-center-center slider-container">
  <span>B</span>
  <PaperSlider @class="flex md-primary" @min={{0}} @max={{255}} @value={{this.color.blue}} @onChange={{action (mut this.color.blue)}} />
  <PaperInput @type="number" @value={{this.color.blue}} @onChange={{action (mut this.color.blue)}} />
</div>

<h2>Rating: {{this.rating}}/5 - demo of theming classes</h2>
<div class="layout layout-align-center-center slider-container">
  <div class="layout flex-10 layout-align-center-center">
    <span>default</span>
  </div>
  <PaperSlider @class="flex" @discrete={{true}} @value={{this.rating1}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut this.rating1)}} />
</div>
<div class="layout layout-align-center-center slider-container">
  <div class="layout flex-10 layout-align-center-center">
    <span>md-warn</span>
  </div>
  <PaperSlider @class="flex" @warn={{true}} @discrete={{true}} @value={{this.rating2}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut this.rating2)}} />
</div>
<div class="layout layout-align-center-center slider-container">
  <div class="layout flex-10 layout-align-center-center">
    <span>md-primary</span>
  </div>
  <PaperSlider @class="flex" @primary={{true}} @discrete={{true}} @value={{this.rating3}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut this.rating3)}} />
</div>

<h2>Disabled</h2>
<div class="layout layout-align-center-center slider-container">
  <PaperIcon @icon="brightness-low" />
  <PaperSlider @class="flex" @value={{this.disabled1}} @disabled={{this.isSliderDisabled}} @onChange={{action (mut this.disabled1)}} />
  <PaperInput @type="number" @value={{this.disabled1}} @onChange={{action (mut this.disabled1)}} />
</div>
<PaperCheckbox @value={{this.isSliderDisabled}} @onChange={{action (mut this.isSliderDisabled)}} />
<PaperSlider @value={{this.disabled2}} @disabled={{true}} />

<h2>Disabled, Discrete</h2>
<PaperSlider @value={{this.discreteDisabled1}} @disabled={{true}} @discrete={{true}} @step={{3}} @min={{0}} @max={{10}} />
<PaperSlider @value={{this.discreteDisabled2}} @disabled={{true}} @discrete={{true}} @step={{10}} />