javascript - css 规模上的 jQueryUI slider 问题

Question

当我使用 css transform: scale(x) 缩放 jQuery slider 时，我遇到了一些问题

我知道 slider 拖动时的像素计算在缩放时不正确，但有什么解决办法吗？

这是我的问题的例子:

$('.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

它不会工作，因为位置会按百分比变化。所以它移动正确但看起来是错误的，因为它不在鼠标光标的位置。
为了获得正确的结果，您可以设置 slider 的 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>