Учимся создавать кроссбраузерные ползунки прокрутки(диапазонноый слайдер) с помощью плагина noUiSlider

<div id="slider"></div>

<script src="jquery.nouislider.js"></script>

<script>
$("#slider").noUiSlider({
  start: 40, //Это начальная отметка, она должна быть в приделах максимальной и минимальной величин(Указав через запятую еще одно число вы добавите еще 1 ползунок)
  orientation: 'vertical', //Расположение "vertical" и по умолчанию горизонтальная(просто ничего не вставляйте)
step: 10, // Шаг  
direction: "rtl", // Определяет, в какую сторону будет ездить ползунок "ltr","rtl"
behaviour: 'drag-fixed', // Если используется 2 ползунка, то перетаскивать сразу оба
range: { // Массив с диапазоном чисел
  'min': 0, //Минимальное
  'max': 100 //Максимальное
  },
connect: true, // Позволяет записывать данные ползунка туда, куда нам нужно!
serialization: {
lower: [ // Первый ползунок
  new Link({  
  target: $('#span') // Мы вставляем текущее значение ползунка в блок с индификатором span
  }),
  new Link({
  target: $('input[type="text"]') // Мы вставляем текущее значение ползунка в текстовое поле
  })
  ],
upper: [ // Второй ползунок
  new Link({  
  target: $('#span') // Мы вставляем текущее значение ползунка в блок с индификатором span
  }),
  new Link({
  target: $('input[type="text"]') // Мы вставляем текущее значение ползунка в текстовое поле
  })
  ],
format: { //Массив с форматом вывода данных
  decimals: 3, //Количество нолей после целого числа
  mark: ',' // Разделитель после целого числа
prefix: '$' // Префикс, например вы можете указать рубли, евро, доллары
  }
}
});
</script>

var Link = $.noUiSlider.Link;

<link href="jquery.nouislider.css" rel="stylesheet">