jQuery range slider — слайдеры цен-значений, ползунки…

Всем привет.

Подскажите, какие есть хорошие, кроссбраузерные ползунки.
Из найденного
http://refreshless.com/nouislider/ - не плохой
http://jqueryui.com/demos/slider/ - конечно UI.
http://ghusse.github.com/jQRangeSlider/stable/demo/
http://egorkhmelev.github.com/jslider/ - очень понравился, но последнее обновление 7 месяцев назад и автор видимо забросил его.

Сколько гуглил, в основном эти попадаются. Может кто знает еще какие-то интересные слайдеры?
Видел еще от jquerymobile, но в список его не стал добовлять

Очень понравился jslider. Но у него есть странный глюк
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<input id="Slider1" type="slider" name="price" value="35000;70000" />
 

35000;70000 - это дефолтные положения ползунков

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

jQuery("#Slider1").slider({from: 10000, to: 100000, step: 1, smooth: true, round: 0, dimension: " $", skin: "plastic",
  onstatechange : function( value ){
    alert(value);
  }
});
 

А вот тут начинается глюк.
from - не с 0, а с 10000.
после этого в value падает не 35000;70000, а 35020;70030
Откуда добавляются 20 у from и 30 у to?
При этом, если я сделаю from от 0, то в value падает все правильно.
Из-за этого теряется возможность использовать jslider, хотя он отличный.
0
jquery range slider ползунки

1 ответов

jquery.ui.slider

  1. работает везде
  2. легко можно изменить вид с помощью CSS
  3. можно создать собственный стиль, используя инструмент themeroller
  4. отличная документация
  5. очень легко встраивается в любой дизайн и очень легок в использовании


пример того, что когда то делалось с помощь jqueryui.slider
http://dev.wa-ua.com/jquery-timeline/ (это недоработанный вариант, все что сумел найти в своих заначках старых разработок, но он ярко демонстрирует, что с jqueryui можно фантазировать)
0

Добрый день! Хочу внедрить jslider, для установки диапазона цен для поиска. Но незнаю что мне делать дальше, у меня есть два инпута для ввода диапазона цен:

<input class="input_price" id="minprice" name="minprice" type="text" value="10000">

<input class="input_price" id="maxprice" name="maxprice" type="text" value="50000">

как мне правильно подключить скрипт чтобы все работало и значения передавались должным образом?

вот код что используется в данном плагине:
<div class="layout-slider">
      <input id="Slider3" type="slider" name="area" value="25;75" />
    </div>
    <script type="text/javascript" charset="utf-8">
      jQuery("#Slider3").slider({ from: 0, to: 500, heterogeneity: ['50/100', '75/250'], scale: [0, '|', 50, '|', '100', '|', 250, '|', 500], limits: false, step: 1, dimension: ' m<small>2</small>', skin: "round_plastic" });
    </script>

увидел что в данном скрипте передаются значения только для одного id и input

(я новичек в этом деле так что сильно не ругайте за возможно глупые вопросы)
0