Advanced Custom Fields ~ Number Slider

This add-on for Advanced Custom Fields adds a visual UI Number Slider field type with format, step and limitation options.

Advanced Custom Fields ~ Number Slider

We love Advanced Custom Fields, to the point that we don’t really consider it as a plugin, it is as essential as WordPress to the way we develop applications – it is robust, updated regularly, provides excellent UX both to developers and clients and the Pro version is loaded with quality add-on features, none more important than Local JSON configuration, which is a game-changer.

This small add-one was written and released many years ago, but we recently had a specific use-case which enabled us to dust down the vaults and see if it still worked as expected – happily it did, so we oiled up the parts and tested on the latest WordPress version and issued a new official release to the Plugin Repo.

The requirement was simple enough, we needed to define and update a numeric value saved as post meta in the WordPress admin, within defined ranges and allow for different steps and value formats – ACF did not provide any specific UX tools for dealing with number values, so we decided to add one đŸ™‚

Firstly, we found a solid jQuery based Slider UI thanks to James Smith and tested out that it would not conflict with either WP or ACF or introduce too many new moving parts or dependencies – the JavaScript library is 7kb minified and 2kb of CSS, so that seemed pretty reasonable.

ACF provided boilerplate code for creating add-ons and we studied a few already available to make sure we followed conventions and did things in a standardized way – we also created versioned functionality, covering ACF versions 3, 4 and 5.

The result is simple – a visual UI tool that makes available an numeric value to the hidden input field, which is saved to standard WP meta tables and updated on page load to position the slider correctly – certainly not world-changing, but good UX and much more fun that writing a number đŸ˜‰

The code is available on GitHub to read and fork, we accept pull requests for updates and you can also report issues there or on our own dedicated support forms – you can also add short suggestions in the comments on this post.

Release Overview
Read the Release Notes
Version: 0.0.0
Read the Comments
Open on github
Open on wordpress
View the Codex

Codex

Currently, there are no known bugs in the latest release – 0.5.6

Suggestions and Enhancements will be added here, once approved.


2 Comments
Avatar

The problem might be here:

function format_value( $value, $post_id, $field ) {

// check if we need to append a value ##
$append = isset( $field[‘slider_append’] ) ? $field[‘slider_append’] : ”;

// kick back value, with append – if set ##
return ( (int)$value ).’ ‘.$append;

}

We could try something like:

// check if we need to append a value ##
$append = isset( $field[‘slider_append’] ) ? ‘ ‘.$field[‘slider_append’] : ”;

// kick back value, with append – if set ##
return ( (int)$value ).$append;

Add a Comment

Your email address will not be published.

These HTML tags work: <a href=""> <code> <strong> <pre>


Connect:
OR

Our Services
Validate your ideas before diving in. Consultancy
Dig deep, audit your data, prepare for action Discovery
Get everything in shape to smooth the project path. Shaping
Let us help you realize your imagination Design
Rock-solid WordPress tools, built to last. Development
Without water, the garden will not grow. Support


Projects
Quinta de Sant’Ana, Portugal
Quinta de Sant’Ana, Portugal

Quinta de Sant'Ana overlooks the picturesque village of Gradil with its cobbled streets, white washed houses and hospitable inhabitants.


Projects: View All or
Releases
Willow
Willow

Willow is a Logic~less Template Engine built for WordPress. Willow plays nicely with ACF, is quick to learn and developer-focused.


Releases: View All or