javascript - помогите сделать такой переключатель ?


2

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

Источник
  •  28
  •  1
  • 28 янв 2018 2018-01-28 16:43:56

1 ответ

7

То что вам надо это горизонтальный ползунок или horizontal scroll есть масса плагинов для их реализации. Один из них я реализовал внизу. А некоторым из этих плагинов дам вам ссылку

JQRangeSlider

jQuery Slider

function collision($div1, $div2) {
//определяем переменные
      var x1 = $div1.offset().left;
      var w1 = 40;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var w2 = 40;
      var r2 = x2 + w2;
        
      if (r1 < x2 || x1 > r2) return false;
      return true;
      
    }
    
// // вызываем slider 

$(#slider).slider({
	range: true,
	min: 0,
	max: 500,
	values: [ 75, 300 ],
	slide: function(event, ui) {
		
		$(.ui-slider-handle:eq(0) .price-range-min).html($ + ui.values[ 0 ]);
		$(.ui-slider-handle:eq(1) .price-range-max).html($ + ui.values[ 1 ]);
		$(.price-range-both).html(<i>$ + ui.values[ 0 ] +  - </i>$ + ui.values[ 1 ] );
		
		//
		
    if ( ui.values[0] == ui.values[1] ) {
      $(.price-range-both i).css(display, none);
    } else {
      $(.price-range-both i).css(display, inline);
    }
        
        //
		
		if (collision($(.price-range-min), $(.price-range-max)) == true) {
			$(.price-range-min, .price-range-max).css(opacity, 0);	
			$(.price-range-both).css(display, block);		
		} else {
			$(.price-range-min, .price-range-max).css(opacity, 1);	
			$(.price-range-both).css(display, none);		
		}
		
	}
});

$(.ui-slider-range).append(<span class="price-range-both value"><i>$ + $(#slider).slider(values, 0 ) +  - </i> + $(#slider).slider(values, 1 ) + </span>);

$(.ui-slider-handle:eq(0)).append(<span class="price-range-min value">$ + $(#slider).slider(values, 0 ) + </span>);

$(.ui-slider-handle:eq(1)).append(<span class="price-range-max value">$ + $(#slider).slider(values, 1 ) + </span>);
body {
  padding: 40px 0 0 0;
}

.value {
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0 0 0 -20px;
  width: 40px;
  text-align: center;
  display: block;
  
  /* optional */
  
  font-weight: normal;
  font-family: Verdana,Arial,sans-serif;
  font-size: 14px;
  color: #333;
}

.price-range-both.value {
  width: 100px;
  margin: 0 0 0 -50px;
  top: 26px;
}

.price-range-both {
  display: none; 
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border-radius:50% !important;
}
.ui-widget-header {
  background:orange !important;
}
.ui-widget-content {
  background:#e1e6ea !important;
}
.value i {
  font-style: normal;
}
<link href="https://qa-help.ru/go/go_redirect?url=%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjqueryui%2F1.11.2%2Fthemes%2Fsmoothness%2Fjquery-ui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="slider"></div>

Видимо, минусы за то что отвечаете без достаточного внимания к вопросу: рекомендуете плагины, хотя вопрос в том "как сверстать?" - не факт, что ТСа устроит готовое; И в вопросе нет тегов/упоминаний jquery (указан тег javascript), но код предлагаете с использованием этой библиотеки... — 28 янв 20182018-01-28 18:29:46.000000
добрые люды зачем ставите минусы свои все же работает идеально... — 28 янв 20182018-01-28 18:04:31.000000