is there any way to customize the output next to the input (type range) showing the value of the input? 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 :
$(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>
You can add the %
character to range's output by simply adding this CSS:
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>