Question

我正在使用jquery滑块-1水平跟踪时间0-24h，1vertical用于调整LED值（更多）。当我拖动水平滑块时，我想实现第一个处理程序垂直滑块处于休止状态，但是当拖动第二个或第三个处理程序时却没有。现在，我通过检查鼠标位置来实现它。on（“ slide”，function（e，ui）。也许可以跟随处理程序本身吗？现在，垂直滑块对于所有处理程序都是无效的，因为我不知道该怎么做。排序处理程序。也许某些机构可以指导我正确解决问题的方法。

这是我的代码。

$(".vertical-slider")
                    
    .slider({ 
        min: 0, 
        max: 255,
        orientation: "vertical"
    })         
    .slider("pips", {
        step: "25"
    });
$(".slider").slider({
    min:0,
    max: 24,
    step: 0.0166666666666666667,
    values: [10, 13, 20]
}).slider("pips", {
        rest: "label",
        step:60
    })
    .on("slide", function(e,ui) {

    var posX = e.clientX - 20;
    $(".vertical-slider").slider().css({
       marginLeft:posX
     })
});

    .slider.ui-slider {
  border-radius: 20px;
  background: #434d5a;
  border: none;
  height: 10px;
  margin: 1em 4em 4em; }
                    
.slider .ui-slider-handle {
  border-radius: 10px;
  height: 10px;
  width: 10px;
  top: -2px;
  margin-left: -11px;
  border: 2px solid #fffaf7; }
                    
    .slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
    .slider .ui-slider-pip .ui-slider-label,
    .slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label { 
      color: blue;} 
      #vertical-slider {
    height: 150px;
    margin-left: 300px;
}

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.css">
	<!-- include the jQuery and jQuery UI scripts -->
	<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
	<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.js"></script>
</head>
<body>

<!-- Slider -->
<br><br>
<div class="vertical-slider" id="vertical-slider"></div>
<div class="slider" id="slider"></div>

 </body>

Answer 1

$(".vertical-slider").slider().css({
   marginLeft:posX
 })

也许您不应使用通配符选择器$(".vertical-slider")，而应使用与您的元素相关的符号，例如

$(el).closest(".vertical-slider")

Answer 2

很长一段时间，但是或多或少都完成了... 如果有人建议改进代码，请添加注释

var c = parseInt(getComputedStyle(document.body).fontSize) *4 ;
var atkape = parseInt($('.vertical-slider').slider().css("width"))*.5;
var val0;
    var val1;
    var val2;
    var sliderwidtgh;
    var max;


$(".slider").slider({
    min:0,
    max: 24,
    step: 0.0166666666666666667,
    values: [10, 13, 20,22],
     create: function(e, ui){
     sliderwidtgh = parseInt($('.slider').slider().css("width"));
     val0 = $('.slider').slider("values")[0];
    val1 = $('.slider').slider("values")[1];
    val2 = $('.slider').slider("values")[2];
    val3 = $('.slider').slider("values")[3];
    max = $('.slider').slider("option", "max")
         $(".vertical-slider").slider().css({
       marginLeft:sliderwidtgh * val0 / max + c +5
     })
     $(".vertical-slider2").slider().css({
       marginLeft:(sliderwidtgh * val1 / max )-(sliderwidtgh * val0 / max + c -15)
     })
     $(".vertical-slider3").slider().css({
       marginLeft:(sliderwidtgh * val2 / max)-(sliderwidtgh * val1 / max + c - 15)
     })
      $(".vertical-slider4").slider().css({
       marginLeft:(sliderwidtgh * val3 / max)-(sliderwidtgh * val2 / max + c - 15)
     })
    }
}).slider("pips", {
        rest: "label",
        step:60
    })
    .on("slide", function(e,ui) {
    sliderwidtgh = parseInt($('.slider').slider().css("width"));
    val0 = $('.slider').slider("values")[0];
    val1 = $('.slider').slider("values")[1];
    val2 = $('.slider').slider("values")[2];
    val3 = $('.slider').slider("values")[3];
   	max = $('.slider').slider("option", "max")
    $(".vertical-slider").slider().css({
       marginLeft:sliderwidtgh * val0 / max + c +5
     })
     $(".vertical-slider2").slider().css({
       marginLeft:(sliderwidtgh * val1 / max)-(sliderwidtgh * val0 / max + c - 15)
     })
     $(".vertical-slider3").slider().css({
       marginLeft:(sliderwidtgh * val2 / max)-(sliderwidtgh * val1 / max + c - 15)
     })
     $(".vertical-slider4").slider().css({
       marginLeft:(sliderwidtgh * val3 / max)-(sliderwidtgh * val2 / max + c - 15)
     })
    
});
$(".vertical-slider")              
    .slider({ 
        min: 0, 
        max: 255,
        orientation: "vertical"
    })         
    .slider("pips", {
        step: "25.5"
    });
$(".vertical-slider2")              
    .slider({ 
        min: 0, 
        max: 255,
        orientation: "vertical"
    })         
    .slider("pips", {
        step: "25.5"
    });
$(".vertical-slider3")              
    .slider({ 
        min: 0, 
        max: 255,
        orientation: "vertical"
    })         
    .slider("pips", {
        step: "25.5"
    });
  $(".vertical-slider4")              
    .slider({ 
        min: 0, 
        max: 255,
        orientation: "vertical"
    })         
    .slider("pips", {
        step: "25.5"
    });
function Test(){
var val=$('.slider').slider("values")[0];
var val1=$('.vertical-slider').slider("value");
	 $("#labeloutput").text( "You selected "  + Math.floor(val)+ " and " + Math.round((val - Math.floor(val)) / 0.016667) + "and " + val1);
}

.slider.ui-slider {
  border-radius: 2px;
  background: #434d5a;
  border: none;
  height: 10px;
  margin: 1em 4em 4em; }
                    
.slider .ui-slider-handle {
  border-radius: 2px;
  height: 12px;
  width: 4px;
  top: -2px;
  margin-left: 0px;}
                    
    .slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
    .slider .ui-slider-pip .ui-slider-label,
    .slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label { 
      color: blue;} 
      
 .vertical-slider.ui-slider,
 .vertical-slider2.ui-slider,
 .vertical-slider3.ui-slider,
 .vertical-slider4.ui-slider{
  background: #434d5a;
  width: 10px;
  border: none;
  display: inline-block;
  margin-bottom:-15px;}
  
  .vertical-slider .ui-slider-handle,
  .vertical-slider2 .ui-slider-handle,
 .vertical-slider3 .ui-slider-handle,
 .vertical-slider4 .ui-slider-handle{
  border-radius: 2px;
  height: 4px;
  width: 12px;
  margin-left:2px;
  margin-bottom:-2px;

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.css">
	<!-- include the jQuery and jQuery UI scripts -->
	<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
	<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.js"></script>

	
</head>
<body>

<!-- Slider -->
<br><br>
<div class="vertical">
  <p class="vertical-slider"></p>
  <p class="vertical-slider2"></p>
  <p class="vertical-slider3"></p>
  <p class="vertical-slider4"></p>
</div>
<div class="slider" id="slider"></div>
<p id="labeloutput" >You</p>
 <button id="desa" type="button" onclick="Test()">Click Me!</button> 
 </body>

jQuery多处理范围滑块对处理程序有效

2 个答案: