css比例尺上的jQueryUI滑块问题

Question

当我用css transform: scale(x)缩放jQuery滑块时，它有一些问题。

我知道滑块拖动上像素的计算在缩放时是不正确的，但是有什么解决方案吗？

下面是我的问题的例子：

​

$('.slider-1').slider();
$('.slider-2').slider();

.wrapper-1,
.wrapper-2
{
  padding: 25px;
  width: 500px;
}
.slider-2 {
  marggin-top: 50px;
  transform: scale(0.6);
  transform-origin: 0;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="wrapper-1">
  <p>Slider normal</p>
  <div class="slider-1"></div>
</div>
<div class="wrapper-2">
  <p>Slider transformed (scaled)</p>
  <div class="slider-2"></div>  
</div>

​

Answer 1

我不认为你能做到。我也尝试过使用scale，它也给出了同样的行为。您可以只更改元素的宽度/高度，很容易设置样式。

​

$('.slider-1').slider();
$('.slider-2').slider();

.wrapper-1,
.wrapper-2
{
  padding: 25px;
  width: 500px;
}
.slider-2.ui-slider-horizontal {
  marggin-top: 50px;
  transform-origin: 0;
  width: 60%;
  height: .5em;
}
.slider-2.ui-slider .ui-slider-handle {
  width: .8em;
  height: .8em;
  top: -0.2em;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="wrapper-1">
  <p>Slider normal</p>
  <div class="slider-1"></div>
</div>
<div class="wrapper-2">
  <p>Slider transformed (scaled)</p>
  <div class="slider-2"></div>  
</div>

​

Answer 2

它不能工作，因为职位按百分比变化。因此，它的移动是正确的，但似乎是错误的，因为它不是在鼠标光标的位置。

要获得正确的结果，可以手动设置滑块的width height和top。

​

$('.slider-1').slider();
$('.slider-2').slider();

.wrapper-1,
.wrapper-2 {
  padding: 25px;
  width: 500px;
}

.slider-2 {
  margin-top: 50px;
  height: 5px !important;
  width: 100px;
}

.slider-2 span {
  transform: scale(0.6);
  top:-9px !important;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="wrapper-1">
  <p>Slider normal</p>
  <div class="slider-1"></div>
</div>
<div class="wrapper-2">
  <p>Slider transformed (scaled)</p>
  <div class="slider-2"></div>
</div>

​