带有输入类型范围问题的 Sweet alert 2 模态答案

【问题标题】：Sweet alert 2 modal with input type range issue带有输入类型范围问题的 Sweet alert 2 模态
【发布时间】：2021-04-22 23:51:19
【问题描述】：

有没有办法自定义输入（类型范围）旁边的输出，显示输入的值？我希望它显示值 + %。

到目前为止，我尝试的是给输入一个 customclass，然后获取它的 <output> 标签并尝试像这样操作它的内部文本：

$(document).on('input', 'input', function () {
$(".customSwal output").text( $(".customSwal").val() + " %" ) 
});

没有特别成功

$(document).ready(function(){

Swal.fire({
    
  icon: 'question',
  showCancelButton:'true',
  cancelButtonColor: '#d33',
  title: 'Test',
  text: 'Test',
  input: 'range',
  width: '25rem',
  inputAttributes: {
    min: 0,
    max: 100,
    step: 1,
   
    
  },
inputValue: 0,
  customClass: {
  input: 'customSwal',

}


})



});

//$(document).on('input', 'input', function () {
//$(".customSwal output").text( $(".customSwal").val() +  " %" ) 
//});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>
<body>
</body>
</html>

【问题讨论】：

标签： javascript jquery sweetalert2

【解决方案1】：

您可以通过简单地添加以下 CSS 将 % 字符添加到范围的输出中：

Swal.fire({
  input: 'range',
  inputAttributes: {
    min: 0,
    max: 100,
  },
  inputValue: 25
})

.swal2-range output::after {
  content: '%';
}

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您可以使用$(".customSwal output").text($(this).val() + " %") 更改output 元素的值。此外，您还需要在处理程序中使用change 事件。

演示代码：

$(document).ready(function() {

  Swal.fire({

    icon: 'question',
    showCancelButton: 'true',
    cancelButtonColor: '#d33',
    title: 'Test',
    text: 'Test',
    input: 'range',
    width: '25rem',
    inputAttributes: {
      min: 0,
      max: 100,
      step: 1,


    },
    inputValue: 0,
    customClass: {
      input: 'customSwal',

    }


  })
  //on load
  $(".customSwal output").text("0 %")

});
///when change occur 
$(document).on('input change', 'input[type=range]', function() {
  //get input value
  $(".customSwal output").text($(this).val() + " %")
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>

<body>
</body>

</html>

【讨论】：