extends /default.pug

block styles
  link(href='vendors/ion-rangeslider/css/ion.rangeSlider.min.css', rel='stylesheet')

block scripts
  // Plugins and scripts required by this view
  script(src='node_modules/ion-rangeslider/js/ion.rangeSlider.min.js')
  script(src='js/sliders.js')

block view
  .animated.fadeIn
    .card
      .card-header
        | Ion.RangeSlider
        a.badge.badge-danger(href='https://coreui.io/pro/') CoreUI Pro Component
        .card-header-actions
          a.card-header-action(href='http://ionden.com/a/plugins/ion.rangeSlider/demo.html', target='_blank')
            small.text-muted docs
      .card-body
        h6 Start without params
        input#range_01(type='text', name='example_name', value='')
        hr
        h6 Set min value, max value and start point
        input#range_02(type='text', name='example_name', value='')
        hr
        h6 Set type to double and specify range, also showing grid and adding prefix "$"
        input#range_03(type='text', name='example_name', value='')
        hr
        h6 Set up range with negative values
        input#range_04(type='text', name='example_name', value='')
        hr
        h6 Using step 250
        input#range_05(type='text', name='example_name', value='')
        hr
        h6 Set up range with fractional values, using fractional step
        input#range_06(type='text', name='example_name', value='')
        hr
        h6 Set up you own numbers
        input#range_07(type='text', name='example_name', value='')
        hr
        h6 Using any strings as your values
        input#range_08(type='text', name='example_name', value='')
        hr
        h6 One more example with strings
        input#range_09(type='text', name='example_name', value='')
        hr
        h6 No prettify. Big numbers are ugly and unreadable
        input#range_10(type='text', name='example_name', value='')
        hr
        h6 Prettify enabled. Much better!
        input#range_11(type='text', name='example_name', value='')
        hr
        h6 Don't like space as separator? Use anything you like!
        input#range_12(type='text', name='example_name', value='')
        hr
        h6 You don't like default prettify function? Use your own!
        input#range_13(type='text', name='example_name', value='')
        hr
        h6 Using prefixes
        input#range_14(type='text', name='example_name', value='')
        hr
        h6 Using postfixes
        input#range_15(type='text', name='example_name', value='')
        hr
        h6 Whant to show that max number is not the biggest one?
        input#range_16(type='text', name='example_name', value='')
        hr
        h6 Taking care about how from and to values connect? Use decorate_both option:
        input#range_17(type='text', name='example_name', value='')
        hr
        h6 Remove double decoration
        input#range_18(type='text', name='example_name', value='')
        hr
        h6 Use your own separator symbol with values_separator option. Like →
        input#range_19(type='text', name='example_name', value='')
        hr
        h6 Or " to ":
        input#range_20(type='text', name='example_name', value='')
        hr
        h6 You can disable all the sliders visual details, if you wish. Like this:
        input#range_21(type='text', name='example_name', value='')
        hr
        h6 Or hide any part you wish
        input#range_22(type='text', name='example_name', value='')
        hr
        h6 And some more
        input#range_23(type='text', name='example_name', value='')
        hr
        h6 And some more
        input#range_24(type='text', name='example_name', value='')