Форум

stas115 · #1 (**permalink**) 12.01.2015, 17:08

Использую на сайте http://jquery.page2page.ru/index.php5/Ползунок_UI эти ползунки, Диапазон значений с двумя ползунками, подскажите как сделать чтобы эти два ползунка не заезжали друг под друга

рони · #2 (**permalink**) 12.01.2015, 17:32

stas115,
где ваш код?

stas115 · #3 (**permalink**) 12.01.2015, 17:46

<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.
Все работает, только необходимо сделать чтобы сами ползунки не заезжали друг на друга, визуально выходит что можно друг на друга сдвинть и будто один всего ползунок

рони · #4 (**permalink**) 12.01.2015, 19:24

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>

Форум

Справочник

Discord чат

Курсы javascript