Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2015, 17:08
Новичок на форуме
Отправить личное сообщение для stas115 Посмотреть профиль Найти все сообщения от stas115
 
Регистрация: 12.01.2015
Сообщений: 2

Помогите с jquery ui ползунками
Использую на сайте http://jquery.page2page.ru/index.php5/Ползунок_UI эти ползунки, Диапазон значений с двумя ползунками, подскажите как сделать чтобы эти два ползунка не заезжали друг под друга
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2015, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

stas115,
где ваш код?
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2015, 17:46
Новичок на форуме
Отправить личное сообщение для stas115 Посмотреть профиль Найти все сообщения от stas115
 
Регистрация: 12.01.2015
Сообщений: 2

<script src="/js/jquery-ui.js"></script>
	<script>
	$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 100,
			max: 7000,
			values: [ 100, 7000 ],
			slide: function( event, ui ) {
				document.getElementById('price').innerHTML = ui.values[ 0 ] + ' - ' + ui.values[ 1 ];
			}, 
			change: function(event, ui) { 
				$( "#price_s" ).val(ui.values[ 0 ]);
				$( "#price_e" ).val(ui.values[ 1 ]);
			}
		});
	});
	</script>
	<div id="slider-range"></div>
	<input type="hidden" name="price_s" id="price_s" value="0">
	<input type="hidden" name="price_e" id="price_e" value="7000">
	<div id="price"></div>

это весь js код, так как используется jquery ui.
Все работает, только необходимо сделать чтобы сами ползунки не заезжали друг на друга, визуально выходит что можно друг на друга сдвинть и будто один всего ползунок

Последний раз редактировалось stas115, 12.01.2015 в 17:48.
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2015, 18:50
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

stas115, здесь посмотри
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2015, 19:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

stas115,
вариант сделать ползунки с разных сторон ...
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
  <style>
  #slider-range{
    margin:20px;
    width:500px;
    height:5px;
  }

  .ui-slider-handle{
    border-radius:50%;
    position:relative;
    font-size:14px;
    display:block;
  }

  .ui-slider-horizontal .ui-slider-handle{
    top:0.5em;
    background:transparent;
    border-radius:0%;
    width:0;
    height:0;
    border-top:none;
    text-decoration:none;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:14px solid red;
  }

  :focus{
    outline:0;
    border:0;
  }

  .ui-slider-horizontal .ui-slider-handle:last-of-type{
    background:transparent;
    border-bottom:none;
    border-top:14px solid red;
    top:-1.2em;
  }
  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>

$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 100,
			max: 7000,
			values: [ 100, 7000 ],
			slide: function( event, ui ) {
				document.getElementById('price').innerHTML = ui.values[ 0 ] + ' - ' + ui.values[ 1 ];
			},
			change: function(event, ui) {
				$( "#price_s" ).val(ui.values[ 0 ]);
				$( "#price_e" ).val(ui.values[ 1 ]);
			}
		});
	});

</script>
</head>

<body>
<div id="slider-range"></div>
	<input type="hidden" name="price_s" id="price_s" value="0">
	<input type="hidden" name="price_e" id="price_e" value="7000">
	<div id="price">100 - 7000</div>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите со скриптом jquery hesrun jQuery 24 22.02.2013 12:59
Помогите с jQuery и кнопкой. vladvo jQuery 7 13.02.2013 14:35
Помогите с Jquery trad Общие вопросы Javascript 5 22.01.2013 19:58
помогите преобразовать javascript в jquery Rayzor jQuery 1 13.09.2012 12:00
Есть один вопрос по jQuery. Помогите. Midel jQuery 10 12.04.2011 09:04