Insert this CSS code in Dashboard > Forums > Settings > Styles > Custom CSS Code textarea, save it, delete all caches, go to forum front-end and press Ctrl+F5:

#wpforo #wpforo-wrap .wpf-field-type-range .wpf-field-wrap .wpf-field-icon{
     position: initial;
     left: 0;
     top: 0;
     padding: 0px 10px;
     font-size: 20px;
     margin-top: 0;
     display: inline-block;
}

#wpforo #wpforo-wrap .wpf-field-type-range .wpf-field input{
     vertical-align: text-bottom;
}

This is not a bug. This is a conflict with your current WordPress theme. This is a site specific issue, so we need direct access to that page to be able to debug the CSS conflicts. Please register a regular user and PM me the login details.

On little bug for the range slider in profile edit mode:

The Icon is not properly positioned:

You can use the 'wpforo_form_prepare_values' filter hook. In this hook you can catch $field . This is an array of all properties. The $field is the current field value, the $field is the field name (this is not the label or title, this is the unique name):

So you can use that hook and check if the name is equal to your field name you can change the field value and return it:

if( $field === 'your_range_field_name' ){
    $field = do_something($field); 
}
return $field;

the styling of the output would i make by myself.

Is there a way to hook in the output of the range slider field? Or override a template?

Kind regards,

Ole

I'm sorry, but the addon doesn't have more styling options. We don't provide UI customization support and services.

currently the range slider field in moembers fields addon outputs only a number value.

Is there any way to style these number as progress bar?

Kind regards,

Ole