Logarithmic slider

Hello @timobock

To create a logarithmic slider, you should customize the form’s code.

For example, assuming you want to apply this behavior to the slider field: fieldname16, insert an “HTML Content” field in the form with the following piece of code as its content:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function () {
    var $ = jQuery,
        f = fbuilderjQuery.fbuilder.forms['_1'].getItem('fieldname16');
    jQuery('#'+f.name+'_slider').slider('option', 'slide', null);		
    jQuery('#'+f.name+'_slider').slider('option', 'stop', null);		
    jQuery('#'+f.name+'_slider').on('slide stop', function (event, ui) {
        var v = ROUND(expon(MAX(jQuery(this).slider('option', 'min'),1),
            jQuery(this).slider('option', 'max'), ui.value));
        $( '#'+f.name ).val( v );
        $( '#'+f.name+'_caption' ).html(
            f.caption
            .replace( /\{\s*0\s*\}/, f._setThousandsSeparator( v ) )
        );
        $( '#'+f.name ).change();
    });
});

function expon(min, max, val) {
    var minv = Math.log(min);
    var maxv = Math.log(max);
    var scale = (maxv - minv) / (max - min);
    return Math.exp(minv + scale * (val - min));
}
</script>

and that’s all.
Best regards.

• This reply was modified 4 years, 8 months ago by codepeople.

Wow, this is great. The only issue now is that the increments are no longer multiples of 10.000. The original setting was that each step is 10.000 units. Would it be possible to round numbers up or down so that they are multiples of 10.000?

Hello @timobock

You can replace, in the previous block of code, the line:

var v = ROUND(expon(MAX(jQuery(this).slider('option', 'min'),1),            jQuery(this).slider('option', 'max'), ui.value));

as follows:

var v = ROUND(expon(MAX(jQuery(this).slider('option', 'min'),1),            jQuery(this).slider('option', 'max'), ui.value), 10000);

I’m sorry, the support service does not cover the implementation of the users’ projects. If you need additional support customizing your controls, you can contact me through my private website: Customization

Best regards.

amazing! Thansk