$(document).ready(function () {
    var totalTokens = 100;

    $('#id_heads_tokens').on('input', function () {
        var headsTokens = parseFloat($(this).val());
        var tailsTokens = totalTokens - headsTokens;
        $('#id_tails_tokens').val(tailsTokens.toFixed(0));
        $('#id_tails_tokens').change(); // Trigger change event to update the slider visually
    });

    $('#id_tails_tokens').on('input', function () {
        var tailsTokens = parseFloat($(this).val());
        var headsTokens = totalTokens - tailsTokens;
        $('#id_heads_tokens').val(headsTokens.toFixed(0));
        $('#id_heads_tokens').change(); // Trigger change event to update the slider visually
    });
});