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? 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>

Answer

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>

Advertisement

Answer