javascript uiSlider -滑块的值和图像未对齐

nhjlsmyf 于 2023-02-18 发布在 Java

关注(0)|答案(1)|浏览(142)

我正在尝试实施Qualtrics调查，其中我希望有一个阶梯图像，旁边有一个垂直滑块（参与者可以在其中设置他们在阶梯上的位置）。滑块上的值从1到10，但手柄不能设置为10，但可以设置为0（它以图形方式显示在滑块下面）。此外，如果我在滑块上设置4，它会将其解释为5（类似的，如果我设置0，它会认为它是1，以此类推）。你知道我做错了什么吗？我正在附加JS和HTML脚本。如果有人能帮助我，我将非常感激!提前感谢
Here is the screenshot of the handle being under the slider

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    
var vSlider = document.getElementById('uiSlider');
  noUiSlider.create(vSlider, 
                    {
      start: 5,
      step: 1,
      direction: 'rtl',
      orientation: 'vertical',
      range: {
          min: 1,
          max: 10
      },
      format: wNumb(
          {
          decimals: 0
      }
                   ),
  // Show a scale with the slider
 pips: {
     mode: 'steps',
     stepped: true,
     density: 10,
    }
  }
                   );
 
  var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
  vSlider.noUiSlider.on('update', function (values, handle) {
      inputNumber.value = values[handle];
  }
                       );
    inputNumber.addEventListener('change', function () {
        vSlider.noUiSlider.set([null, this.value]);
    }
                                );
    inputNumber.setAttribute('readonly',true)
    }
                                );

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

<table style="width:100%">
 <tbody>
  <tr>
   <td style="padding-right:10px; width:65%; vertical-align: top;" rowspan="3"><img style="width: 600px; height: auto;" src="https://www.researchgate.net/profile/Paul-Vaucher/publication/259879628/figure/fig3/AS:341740713201697@1458488743795/MacArthur-scale-of-subjective-social-status-It-is-used-to-assess-patient-and-doctor.png"></td>
  </tr>
  
  <tr>
   <td style="padding-left:30px;">
     <div style="height:375px;" id="uiSlider">&nbsp;</div>
   </td>
  </tr>
 </tbody>
</table>

JavaScript

来源：https://stackoverflow.com/questions/75475848/uislider-values-and-image-of-the-slider-are-misaligned

1条答案

按热度按时间

xqkwcwgp1#

尝试添加以下内容：

inputNumber.addEventListener('change', function () {
        vSlider.noUiSlider.set(values[handle]);
    }

而不是这个：

inputNumber.addEventListener('change', function () {
    vSlider.noUiSlider.set([softSlider.noUiSlider.set]);
}

它会帮助你达到数字“10”。
关于数字“0”，实际上它不是“0”，在你的刻度中是“1”。如果你仔细看，当你设置“7”时，实际上你的手柄在第7个标记之下，同样的，如果你设置10，手柄在第10个标记之下。所以手柄的位置，你认为是“0”，在你选择的设计中实际上是“1”。
但是，您可以通过添加以下行来覆盖此行为：

var override = document.getElementsByClassName('noUi-base')[0];
override.style.position = "initial"

在创建滑块的代码下面。

noUiSlider.create(vSlider, 
                    {
      start: 5,
      step: 1,
      direction: 'rtl',
      orientation: 'vertical',
      range: {
          min: 1,
          max: 10
      },
      format: wNumb(
          {
          decimals: 0
      }
                   ),
  // Show a scale with the slider
 pips: {
     mode: 'steps',
     stepped: true,
     density: 10,
    }
  }
                   );

赞(0）回复(0）举报 2023-02-18

我来回答

javascript uiSlider -滑块的值和图像未对齐

1条答案

相关问题

热门标签

最新问答