Notifications
Clear all

[Solved] Output range slider field from member fields addon

9 Posts
2 Users
1 Likes
995 Views
Posts: 11
Customer
Topic starter
(@ole-poetter)
Member
Joined: 3 years ago

Hi,

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

8 Replies
Posts: 4168
 Tom
Admin
(@tomson)
Famed Member
Joined: 9 years ago

Hi @ole-poetter,

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

Posts: 11
Customer
Topic starter
(@ole-poetter)
Member
Joined: 3 years ago

Hi @tomson,

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

1 Reply
 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

@ole-poetter,

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['value'] is the current field value, the $field['name'] is the field name (this is not the label or title, this is the unique name):

2021 06 20 17 11 09

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['name'] === 'your_range_field_name' ){
    $field['value'] = do_something($field['value']); 
}
return $field;
Posts: 11
Customer
Topic starter
(@ole-poetter)
Member
Joined: 3 years ago

Thank you very much @tomson.

Here is my result:

progress
Posts: 11
Customer
Topic starter
(@ole-poetter)
Member
Joined: 3 years ago

@tomson

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

The Icon is not properly positioned:

icon range
3 Replies
 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

@ole-poetter,

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.

 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

@ole-poetter,

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;
}
Customer
(@ole-poetter)
Joined: 3 years ago

Member
Posts: 11

@tomson Thank you very much. It works!

Share:
Scroll to top