<app-page-header
  [title]="'Range slider'"
  [title1]="'Range slider'"
  [activeitem]="'Advanced UI'"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Basic Rangeslider Options with Html</h5>
      </div>
      <div class="box-body">
        <ngx-slider [(value)]="value7" [options]="options"></ngx-slider>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Basic Rangeslider Options with Js</h5>
      </div>
      <div class="box-body">
        <ngx-slider [(value)]="value8" [options]="options"></ngx-slider>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->
<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Multiple Rangesliders</h5>
      </div>
      <div class="box-body">
        <div>
          <ngx-slider [(value)]="value9" [options]="options"></ngx-slider>
        </div>
        <div>
          <ngx-slider [(value)]="value10" [options]="options"></ngx-slider>
        </div>
        <div>
          <ngx-slider [(value)]="value11" [options]="options"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Programmatic change</h5>
      </div>
      <div class="box-body">
        <ngx-slider [(value)]="value" [options]="options"></ngx-slider>
        <input
          class="nr-input ti-form-input"
          type="number"
          [(ngModel)]="value"
        />
      </div>
    </div>
  </div>
</div>
<!-- End::row-2 -->

<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Basic Nouislider</h5>
      </div>
      <div class="box-body">
        <div id="nousislider"></div>
        <ngx-slider
          [(value)]="minValue12"
          [(highValue)]="maxValue12"
          [options]="options12"
        ></ngx-slider>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Fit Handles</h5>
      </div>
      <div class="box-body">
        <div id="slider-fit">
          <ngx-slider
            [(value)]="minValue1"
            [(highValue)]="maxValue1"
            [options]="options"
          ></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Rounded Styling</h5>
      </div>
      <div class="box-body">
        <div id="slider-round">
          <ngx-slider [(value)]="value1" [options]="options"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Square Styling</h5>
      </div>
      <div class="box-body">
        <div id="slider-square">
          <ngx-slider [(value)]="value2" [options]="options"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-3 -->

<!-- Start::row-4 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 xxl:col-span-4">
    <div class="box colo-picker-slider">
      <div class="box-header">
        <h5 class="box-title">Color Picker Slider</h5>
      </div>
      <div class="box-body text-center">
          <div class="color-picker-slider">
            <div #slider1 class="sliders noUi-target noUi-ltr noUi-vertical noUi-txt-dir-ltr">
              <input
                type="range"
                min="0"
                max="255"
                [(ngModel)]="red"
                (input)="updateColor()"
                id="red"
              />
            </div>
            <div #slider2 class="sliders noUi-target noUi-ltr noUi-vertical noUi-txt-dir-ltr">
              <input
                type="range"
                min="0"
                max="255"
                [(ngModel)]="green"
                (input)="updateColor()"
                id="green"
              />
            </div>
            <div #slider3 class="sliders noUi-target noUi-ltr noUi-vertical noUi-txt-dir-ltr">
              <input
                type="range"
                min="0"
                max="255"
                [(ngModel)]="blue"
                (input)="updateColor()"
                id="blue"
              />
            </div>
          </div>
          <div class="preview" [style.background-color]="getColor()"></div>
          <a #result 
            id="result"
            [style.background-color]="getColor()"
          ></a>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Locking Sliders</h5>
      </div>
      <div class="box-body">
        <ngx-slider
          [options]="options"
          [formControl]="sliderControl"
        ></ngx-slider>
        <p>Value: {{ sliderControl.value }}</p>
        <button
          type="button"
          id="lockbutton"
          class="ti-btn ti-btn-primary ltr:float-right rtl:float-left"
        >
          Lock
        </button>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Merging tooltips slider</h5>
      </div>
      <div class="box-body">
        <ngx-slider
          [(value)]="minValue2"
          [(highValue)]="maxValue2"
          [options]="options"
        ></ngx-slider>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Non Linear Slider</h5>
      </div>
      <div class="box-body">
        <div id="nonlinear">
          <ngx-slider
            [(value)]="minValue"
            [(highValue)]="maxValue"
            [options]="options"
          ></ngx-slider>
          <p>Min value: {{ minValue }}</p>
          <p>Max value: {{ maxValue }}</p>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Sliding Handles Tooltips</h5>
      </div>
      <div class="box-body">
        <ngx-slider
          [(value)]="value3"
          [(highValue)]="value4"
          [options]="options"
        ></ngx-slider>
      </div>
    </div>
  </div>
</div>
<!-- End::row- 4 -->

<!-- Start::row-5 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 lg:col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Colored Connect Elements</h5>
      </div>
      <div class="box-body">
        <div class="slider" id="color-slider">
          <ngx-slider [(value)]="value6" [options]="options1"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row- 5-->

<!-- Start::row-6 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 lg:col-span-6">
    <div class="box toggle-movements">
      <div class="box-header">
        <h5 class="box-title">Toggle Movement By Clicking Pips</h5>
      </div>
      <div class="box-body pb-16">
        <div id="slider-pips">
          <ngx-slider [(value)]="minValue3" [options]="options3"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box toggle-movements">
      <div class="box-header">
        <h5 class="box-title">Soft Limits</h5>
      </div>
      <div class="box-body pb-16">
        <div id="soft">
          <ngx-slider [(value)]="value14" [options]="options4"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row- 6-->

<!-- Start::row-7 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Nouislider Primary Color</h5>
      </div>
      <div class="box-body">
        <div id="primary-colored-slider">
          <ngx-slider [(value)]="minValue5" [options]="options5"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Nouislider Secondary Color</h5>
      </div>
      <div class="box-body">
        <div id="secondary-colored-slider">
          <ngx-slider [(value)]="minValue6" [options]="options6"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Nouislider Warning Color</h5>
      </div>
      <div class="box-body">
        <div id="warning-colored-slider">
          <ngx-slider [(value)]="minValue7" [options]="options7"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row- 7-->

<!-- Start::row-8 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Nouislider Info Color</h5>
      </div>
      <div class="box-body">
        <div id="info-colored-slider">
          <ngx-slider [(value)]="minValue8" [options]="options8"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Nouislider Success Color</h5>
      </div>
      <div class="box-body">
        <div id="success-colored-slider">
          <ngx-slider [(value)]="minValue9" [options]="options9"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Nouislider Danger Color</h5>
      </div>
      <div class="box-body">
        <div id="danger-colored-slider">
          <ngx-slider [(value)]="minValue10" [options]="options10"></ngx-slider>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row- 8-->