para {
  text_node 'ExpressUI uses ionRangeSlider to render single and double-range sliders. A single slider uses one knob that users can move to select a value within a range, while a double slider lets users move two knobs to select minimum and maximum values within a range.'
  a(href: 'https://github.com/IonDen/ion.rangeSlider', title: 'ionRangeSlider documentation') { 'See documentation' }
  text_node 'and usage guidelines.'
}

table {
  thead {
    th { "Code" }
    th { "Notes" }
  }
  tbody {
    tr {
      td {
        code { "$('#ae-single-slider').ionRangeSlider();" }
      }
      td { "Required Javascript. This script initializes the default, single range slider." }
    }

    tr {
      td {
        code {
          "$('#ae-double-slider').ionRangeSlider({
         		type: 'double',
						min: 0,
						max: 5000,
						from: 1000,
						to: 4000,
        	});"
        }
      }
      td { "Required Javascript. This script initializes the double range slider, sets the minimum and maximum values and other customization values." }
    }


    tr {
      td {
        code { '<input id="ae-single-slider" type="text"></input>' }
      }
      td { "Required mark-up. The Javascript inserts the single slider through this ID." }
    }

    tr {
      td {
        code { '<input id="ae-double-slider" type="text"></input>' }
      }
      td { "Required mark-up. The Javascript inserts the double slider through this ID." }
    }
  }
}

code_demo {
  %Q{
  	input(id: 'ae-double-slider', type: 'text')
  	input(id: 'ae-single-slider', type: 'text')
  }
}