带有输入类型范围问题的 Sweet alert 2 模态
[英]Sweet alert 2 modal with input type range issue
问题描述
is there any way to customize the output next to the input (type range) showing the value of the input?
有什么方法可以自定义显示输入值的输入（类型范围）旁边的 output？ i want it to show the value + %.我希望它显示值 + %。
What i tried so far is to give the input a customclass and then get its <output> tag and tried to manipulate its inner text like this:到目前为止我尝试的是给输入一个自定义类，然后获取它的<output>标签并尝试像这样操作它的内部文本：
$(document).on('input', 'input', function () {
$(".customSwal output").text( $(".customSwal").val() + " %" )
});
with no particular success没有特别成功
$(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>
2 个解决方案
解决方案1
1 2021-04-23 04:21:45
You can use $(".customSwal output").text($(this).val() + " %") to change value of output element.您可以使用$(".customSwal output").text($(this).val() + " %")更改output元素的值。 Also, you need to to use change event as well inside your handler.此外，您还需要在处理程序中使用change事件。
Demo Code :演示代码：
$(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>
解决方案2
1 已采纳 2021-04-24 08:36:10
You can add the % character to range's output by simply adding this CSS:您可以通过简单地添加此 CSS 将%字符添加到范围的 output：
Swal.fire({ input: 'range', inputAttributes: { min: 0, max: 100, }, inputValue: 25 })
.swal2-range output::after { content: '%'; }
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.