- var page_Title = 'Range Slider';
- var theme_customizer      = true;
- var range_slider          = true;
- var page_range_slider     = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Range Slider
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Range Slider
          // Container-fluid starts
          .container
            .alert.txt-primary.alert-bg-primary.alert-dismissible.fade.show.warning-alert.mb-6(role='alert')
              i(data-feather='alert-triangle')
              p(class="[@media(max-width:767px)]:line-clamp-[1]")
                | This is the range-slider page which uses jQuery 
                a(href="http://ionden.com/a/plugins/ion.rangeSlider" target="_blank") [ http://ionden.com/a/plugins/ion.rangeSlider ]
              button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Default Range Slider
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                    form.theme-form.form-label-align-right.range-slider
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-01(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Min Max Value
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-02(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Prefix
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-03(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Negative Value
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-04(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Steps Range Slider
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-05(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Custom Values
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-06(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Prettify Numbers
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-07(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Disabled
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-08(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Manipulating UI
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-09(type='text')
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Core UI Text
                    p.f-m-light.mt-1  
                      | Use 
                      code range-slider 
                      |  class. and cuba used Ion range slider.
                  .card-body
                      .form-group.grid.grid-cols-12.py-1.justify-center
                        div(class="col-span-12 md:col-span-12")
                          input#u-range-10(type='text')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
