Sliders

  1. Home
  2. Sliders

Ion Slider

$0$5 000$1 000$4 000
10 €100 €
10 mm0 mm
-50°50°0°
10 light years100 light years

Bootstrap Slider

.slider-red input.slider

.slider-blue input.slider

.slider-green input.slider

.slider-yellow input.slider

.slider-teal input.slider

.slider-purple input.slider

$(function () { /* BOOTSTRAP SLIDER */ $('.slider').bootstrapSlider() /* ION SLIDER */ $('#range_1').ionRangeSlider({ min : 0, max : 5000, from : 1000, to : 4000, type : 'double', step : 1, prefix : '$', prettify: false, hasGrid : true }) $('#range_2').ionRangeSlider() $('#range_5').ionRangeSlider({ min : 0, max : 10, type : 'single', step : 0.1, postfix : ' mm', prettify: false, hasGrid : true }) $('#range_6').ionRangeSlider({ min : -50, max : 50, from : 0, type : 'single', step : 1, postfix : '°', prettify: false, hasGrid : true }) $('#range_4').ionRangeSlider({ type : 'single', step : 100, postfix : ' light years', from : 55000, hideMinMax: true, hideFromTo: false }) $('#range_3').ionRangeSlider({ type : 'double', postfix : ' miles', step : 10000, from : 25000000, to : 35000000, onChange: function (obj) { var t = '' for (var prop in obj) { t += prop + ': ' + obj[prop] + '\r\n' } $('#result').html(t) }, onLoad : function (obj) { // } }) })