kalidea/kaligraphi

<h1>Slider</h1>

<div class="example" style="display: block">
  <article>
    <div>
      <kal-slider
        [from]="from"
        [to]="to"
        [tick]="tick"
        [color]="color"
        [max]="max"
        [min]="min"
        [disabled]="disabled"
        [readonly]="readonly"
        [kalTheme]="themes"
        [(ngModel)]="value"
      >
      </kal-slider>
    </div>
  </article>
</div>

<div class="configurator">

  <kal-form-field>
    <kal-select label="themes" [multiple]="true" [(ngModel)]="themes">
      <kal-option value="">default</kal-option>
      <kal-option value="orange">orange</kal-option>
      <kal-option value="red">red</kal-option>
      <kal-option value="blue">blue</kal-option>
      <kal-option value="green">green</kal-option>
      <kal-option value="yellow">yellow</kal-option>
      <kal-option value="marine">marine</kal-option>
      <kal-option value="anthracite">anthracite</kal-option>
      <kal-option value="corail">corail</kal-option>
      <kal-option value="blueviolet">blueviolet</kal-option>
      <kal-option value="cornflowerblue">cornflowerblue</kal-option>
      <kal-option value="orange-normal">orange-normal</kal-option>
      <kal-option value="red-normal">red-normal</kal-option>
      <kal-option value="blue-normal">blue-normal</kal-option>
      <kal-option value="green-normal">green-normal</kal-option>
      <kal-option value="yellow-normal">yellow-normal</kal-option>
      <kal-option value="marine-normal">marine-normal</kal-option>
      <kal-option value="anthracite-normal">anthracite-normal</kal-option>
      <kal-option value="corail-normal">corail-normal</kal-option>
      <kal-option value="blueviolet-normal">blueviolet-normal</kal-option>
      <kal-option value="cornflowerblue-normal">cornflowerblue-normal</kal-option>
      <kal-option value="reverse">reverse</kal-option>
    </kal-select>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="from" [(ngModel)]="from" type="number"></kal-input>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="to" [(ngModel)]="to" type="number"></kal-input>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="tick" [(ngModel)]="tick" type="number"></kal-input>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="max" [(ngModel)]="max" type="number"></kal-input>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="min" [(ngModel)]="min" type="number"></kal-input>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="value" [(ngModel)]="value"></kal-input>
  </kal-form-field>
  <kal-form-field>
    <kal-input label="color" [(ngModel)]="color" type="color"></kal-input>
  </kal-form-field>

  <kal-form-field>
    <kal-checkbox label="disabled" [(ngModel)]="disabled"></kal-checkbox>
  </kal-form-field>

  <kal-form-field>
    <kal-checkbox label="readonly" [(ngModel)]="readonly"></kal-checkbox>
  </kal-form-field>

</div>