Redux

# Slider

The Redux Slider Field offers a great array features for just about every need. We offer dual handles, floating point values, text/label/select output and theme responsiveness!

Table of Contents

# Arguments

Name Type Default Description
type string slider Value identifying the field type.
min int/float 0 Value setting the minimum slider value.
max int/float 1 Value setting the maximum slider value.
step int/float 1 Value setting the slider step value.
handles int 1 Sets the number of slider handles, either 1 or 2. Any other value will default to 1
display_value string text Sets output mode for the slider value. Accepted values include none for no output, label for a printed value, text for an editable text box, or select for a select box of values. Any other or incorrect values will default to text.
resolution int/float 1 Sets the value's decimal significance. Acceptable values are: 1, 0.1, 0.01, 0.001, 0.0001, 0.00001. Any improper value will default to 1.
float_mark string (decimal) Sets the floating point marker to either . (decimal) or , (comma). Any other value will default to the decimal value.
select2 array Array of select2 arguments. For more information see the 'Constructor' section of the Select2 docs. Only applies when display_value is set to select.

Also See

NOTE

When setting the resolution argument to a floating point value, it will also be necessary to set the step argument to a floating point for values after the decimal point to change value. Not doing so will result in the value to the left of the decimal changing value upon slide.

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.
 
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'slider'
) );

# Example Config(s)

# Default

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'        => 'opt-slider-label',
    'type'      => 'slider',
    'title'     => esc_html__('Slider Example 1', 'your-textdomain-here'),
    'subtitle'  => esc_html__('This slider displays the value as a label.', 'your-textdomain-here'),
    'desc'      => esc_html__('Slider description. Min: 1, max: 500, step: 1, default value: 250', 'your-textdomain-here'),
    "default"   => 250,
    "min"       => 1,
    "step"      => 1,
    "max"       => 500,
    'display_value' => 'label'
) );

# Steps

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id' => 'opt-slider-text',
    'type' => 'slider',
    'title' => esc_html__('Slider Example 2 with Steps (5)', 'your-textdomain-here'),
    'subtitle' => esc_html__('This example displays the value in a text box', 'your-textdomain-here'),
    'desc' => esc_html__('Slider description. Min: 0, max: 300, step: 5, default value: 75', 'your-textdomain-here'),
    "default" => 75,
    "min" => 0,
    "step" => 5,
    "max" => 300,
    'display_value' => 'text'    
) );

# Optional Display Text

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id' => 'opt-slider-text',
    'type' => 'slider',
    'title' => esc_html__('Slider Example 2 with Steps (5)', 'your-textdomain-here'),
    'subtitle' => esc_html__('This example displays the value in a text box', 'your-textdomain-here'),
    'desc' => esc_html__('Slider description. Min: 0, max: 300, step: 5, default value: 75', 'your-textdomain-here'),
    "default" => 75,
    "min" => 0,
    "step" => 5,
    "max" => 300,
    'display_value' => 'text'
) );
# Two Sliders
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id' => 'opt-slider-select',
    'type' => 'slider',
    'title' => esc_html__('Slider Example 3 with two sliders', 'your-textdomain-here'),
    'subtitle' => esc_html__('This example displays the values in select boxes', 'your-textdomain-here'),
    'desc' => esc_html__('Slider description. Min: 0, max: 500, step: 5, slider 1 default value: 100, slider 2 default value: 300', 'your-textdomain-here'),
    "default" => array(
        1 => 100,
        2 => 300,
    ),
    "min" => 0,
    "step" => 5,
    "max" => "500",
    'display_value' => 'select',
    'handles' => 2, 
) );

# Decimal Steps

array(
    'id' => 'opt-slider-float',
    'type' => 'slider',
    'title' => esc_html__('Slider Example 4 with float values', 'your-textdomain-here'),
    'subtitle' => esc_html__('This example displays float values', 'your-textdomain-here'),
    'desc' => esc_html__('Slider description. Min: 0, max: 1, step: .1, default value: .5', 'your-textdomain-here'),
    "default" => .5,
    "min" => 0,
    "step" => .1,
    "max" => 1,
    'resolution' => 0.1,
    'display_value' => 'text'
) );

# Example Usage

This example in based on the example usage provided above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

global $redux_demo;

echo 'Slider label value: '  . $redux_demo['opt-slider-label'];
echo 'Slider text value: '   . $redux_demo['opt-slider-text'];
echo 'Slider select value: ' . $redux_demo['opt-slider-select'];
echo 'Slider float value: '  . $redux_demo['opt-slider-float'];

← Slides →