Date and Time Picker
Basic
Code
  
Date Time
Code
Use {{"{enableTime: true, dateFormat: 'Y-m-d H:i'}"}} option to enable time support
  
Range Calendar
Code
Use {{ "{mode: 'range'}" }} select the date with range.
  
Preloading Time
Code
Use {{ "{noCalendar: true, enableTime: true, dateFormat: 'H:i'}" }} with Date Time options to disable calendar and show time picker only.
  
Javascript Range Slider
Postion : Top-Left
Code
{{ slider1 }} %
  
Postion : Top-right
Code
{{ slider2 }} %
  
Postion : Bottom-Left
Code
{{ slider3 }} %
  
Postion : Bottom-right
Code
{{ slider4 }} %
  
noUI Slider
Using HTML5 input elements
Code
  
Non linear slider
Code
{{ nouiSlider2[0].toFixed(2) }}{{ nouiMin2Perc }}%
{{ nouiSlider2[1].toFixed(2) }}{{ nouiMax2Perc }}%
  
Locking sliders together
Code
{{nouiSlider3.toFixed(2)}}
{{nouiSlider4.toFixed(2)}}