Skip to content

Commit 7ca1c16

Browse files
kprovancekprovance
committed
Updates for spinner and slider
Signed-off-by: Kev Provance <[email protected]>
1 parent 683c892 commit 7ca1c16

File tree

2 files changed

+115
-75
lines changed

2 files changed

+115
-75
lines changed

‎docs/core-fields/slider.md

+97-64
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ and theme responsiveness!
2121
|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`.|
2222
|float_mark|string|(decimal)|Sets the floating point marker to either `.` (decimal) or `,` (comma). Any other value will default to the decimal value.|
2323
|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`.|
24+
|output_units|string|`px`|Sets the unit to be generated in any set output.
2425

2526
::: tip Also See
2627
- [Global Field Arguments](../configuration/fields/arguments.md)
@@ -55,87 +56,115 @@ export default {
5556

5657
#### Default
5758
```php
58-
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
59-
'id' => 'opt-slider-label',
60-
'type' => 'slider',
61-
'title' => esc_html__('Slider Example 1', 'your-textdomain-here'),
62-
'subtitle' => esc_html__('This slider displays the value as a label.', 'your-textdomain-here'),
63-
'desc' => esc_html__('Slider description. Min: 1, max: 500, step: 1, default value: 250', 'your-textdomain-here'),
64-
"default" => 250,
65-
"min" => 1,
66-
"step" => 1,
67-
"max" => 500,
68-
'display_value' => 'label'
69-
) );
59+
Redux::set_field(
60+
'OPT_NAME',
61+
'SECTION_ID',
62+
array(
63+
'id' => 'opt-slider-label',
64+
'type' => 'slider',
65+
'title' => esc_html__('Slider Example 1', 'your-textdomain-here'),
66+
'subtitle' => esc_html__('This slider displays the value as a label.', 'your-textdomain-here'),
67+
'desc' => esc_html__('Slider description. Min: 1, max: 500, step: 1, default value: 250', 'your-textdomain-here'),
68+
"default" => 250,
69+
"min" => 1,
70+
"step" => 1,
71+
"max" => 500,
72+
'display_value' => 'label'
73+
)
74+
);
7075
```
7176

7277
#### Steps
7378
```php
74-
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
75-
'id' => 'opt-slider-text',
76-
'type' => 'slider',
77-
'title' => esc_html__('Slider Example 2 with Steps (5)', 'your-textdomain-here'),
78-
'subtitle' => esc_html__('This example displays the value in a text box', 'your-textdomain-here'),
79-
'desc' => esc_html__('Slider description. Min: 0, max: 300, step: 5, default value: 75', 'your-textdomain-here'),
80-
"default" => 75,
81-
"min" => 0,
82-
"step" => 5,
83-
"max" => 300,
84-
'display_value' => 'text'
85-
) );
79+
Redux::set_field(
80+
'OPT_NAME',
81+
'SECTION_ID',
82+
array(
83+
'id' => 'opt-slider-text',
84+
'type' => 'slider',
85+
'title' => esc_html__( 'Slider Example 2 with Steps (5)', 'your-textdomain-here' ),
86+
'subtitle' => esc_html__( 'This example displays the value in a text box', 'your-textdomain-here' ),
87+
'desc' => esc_html__( 'Slider description. Min: 0, max: 800, step: 5, default value: 75', 'your-textdomain-here' ),
88+
'default' => 750,
89+
'min' => 0,
90+
'step' => 5,
91+
'max' => 800,
92+
'display_value' => 'text',
93+
'output' => array( '.site-content' => 'max-width' ),
94+
),
95+
);
8696
```
8797

8898
#### Optional Display Text
8999
```php
90-
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
91-
'id' => 'opt-slider-text',
92-
'type' => 'slider',
93-
'title' => esc_html__('Slider Example 2 with Steps (5)', 'your-textdomain-here'),
94-
'subtitle' => esc_html__('This example displays the value in a text box', 'your-textdomain-here'),
95-
'desc' => esc_html__('Slider description. Min: 0, max: 300, step: 5, default value: 75', 'your-textdomain-here'),
96-
"default" => 75,
97-
"min" => 0,
98-
"step" => 5,
99-
"max" => 300,
100-
'display_value' => 'text'
101-
) );
100+
Redux::set_field(
101+
'OPT_NAME',
102+
'SECTION_ID',
103+
array(
104+
'id' => 'opt-slider-text',
105+
'type' => 'slider',
106+
'title' => esc_html__('Slider Example 2 with Steps (5)', 'your-textdomain-here'),
107+
'subtitle' => esc_html__('This example displays the value in a text box', 'your-textdomain-here'),
108+
'desc' => esc_html__('Slider description. Min: 0, max: 300, step: 5, default value: 75', 'your-textdomain-here'),
109+
"default" => 75,
110+
"min" => 0,
111+
"step" => 5,
112+
"max" => 300,
113+
'display_value' => 'text'
114+
)
115+
);
102116
```
103117

104118
##### Two Sliders
105119
```php
106-
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
107-
'id' => 'opt-slider-select',
108-
'type' => 'slider',
109-
'title' => esc_html__('Slider Example 3 with two sliders', 'your-textdomain-here'),
110-
'subtitle' => esc_html__('This example displays the values in select boxes', 'your-textdomain-here'),
111-
'desc' => esc_html__('Slider description. Min: 0, max: 500, step: 5, slider 1 default value: 100, slider 2 default value: 300', 'your-textdomain-here'),
112-
"default" => array(
113-
1 => 100,
114-
2 => 300,
120+
Redux::set_field(
121+
'OPT_NAME',
122+
'SECTION_ID',
123+
array(
124+
'id' => 'opt-slider-select',
125+
'type' => 'slider',
126+
'title' => esc_html__( 'Slider Example 3 with two sliders', 'your-textdomain-here' ),
127+
'subtitle' => esc_html__( 'This example displays the values in select boxes', 'your-textdomain-here' ),
128+
'desc' => esc_html__( 'Slider description. Min: 0, max: 500, step: 5, slider 1 default value: 100, slider 2 default value: 300', 'your-textdomain-here' ),
129+
'default' => array(
130+
1 => 100,
131+
2 => 300,
132+
),
133+
'min' => 0,
134+
'step' => 5,
135+
'max' => '500',
136+
'display_value' => 'select',
137+
'handles' => 2,
138+
139+
// When using output with multiple handles, a selector
140+
// must be applied to each handle via an array.
141+
'output' => array(
142+
1 => array( '.site-footer' => 'max-width' ),
143+
2 => array( '.site-footer' => 'min-width' ),
144+
),
115145
),
116-
"min" => 0,
117-
"step" => 5,
118-
"max" => "500",
119-
'display_value' => 'select',
120-
'handles' => 2,
121-
) );
146+
);
122147
```
123148

124149
#### Decimal Steps
125150
```php
126-
array(
127-
'id' => 'opt-slider-float',
128-
'type' => 'slider',
129-
'title' => esc_html__('Slider Example 4 with float values', 'your-textdomain-here'),
130-
'subtitle' => esc_html__('This example displays float values', 'your-textdomain-here'),
131-
'desc' => esc_html__('Slider description. Min: 0, max: 1, step: .1, default value: .5', 'your-textdomain-here'),
132-
"default" => .5,
133-
"min" => 0,
134-
"step" => .1,
135-
"max" => 1,
136-
'resolution' => 0.1,
137-
'display_value' => 'text'
138-
) );
151+
Redux::set_field(
152+
'OPT_NAME',
153+
'SECTION_ID',
154+
array(
155+
'id' => 'opt-slider-float',
156+
'type' => 'slider',
157+
'title' => esc_html__( 'Slider Example 4 with float values', 'your-textdomain-here' ),
158+
'subtitle' => esc_html__( 'This example displays float values', 'your-textdomain-here' ),
159+
'desc' => esc_html__( 'Slider description. Min: 0, max: 1, step: .1, default value: .5', 'your-textdomain-here' ),
160+
'default' => .5,
161+
'min' => 0,
162+
'step' => .1,
163+
'max' => 1,
164+
'resolution' => 0.1,
165+
'display_value' => 'text',
166+
),
167+
);
139168

140169
```
141170
### Example Usage
@@ -146,7 +175,11 @@ global $redux_demo;
146175

147176
echo 'Slider label value: ' . $redux_demo['opt-slider-label'];
148177
echo 'Slider text value: ' . $redux_demo['opt-slider-text'];
178+
179+
// Return value will be a one-based array (first and second handles)
180+
// as multiple handles was set.
149181
echo 'Slider select value: ' . $redux_demo['opt-slider-select'];
182+
150183
echo 'Slider float value: ' . $redux_demo['opt-slider-float'];
151184
```
152185

‎docs/core-fields/spinner.md

+18-11
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ The Spinner field returns the value entered in its input box or via clicks on it
1515
|min|string/int|`0`|Value to set the minimum spinner value.|
1616
|max|string/int|`1`|Value to set the maximum spinner value.|
1717
|step|string/int|`1`|Value to set the spinner step value.|
18+
|output_units|string|`px`|Sets the unit to be generated in any set output.
1819

1920
::: tip Also See
2021
- [Global Field Arguments](../configuration/fields/arguments.md)
2122
- [Using the `compiler` Argument](../configuration/fields/compiler.md)
23+
- [Using the `output` Argument](../configuration/fields/output.md)
2224
- [Using the `output_variables` Argument](../configuration/fields/output-variables.md)
2325
- [Using the `permissions` Argument](../configuration/fields/permissions.md)
2426
- [Using the `required` Argument](../configuration/fields/required.md)
@@ -41,17 +43,22 @@ export default {
4143

4244
## Example Config
4345
```php
44-
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
45-
'id' => 'opt-spinner',
46-
'type' => 'spinner',
47-
'title' => esc_html__('JQuery UI Spinner Example 1', 'your-textdomain-here'),
48-
'subtitle' => esc_html__('No validation can be done on this field type','your-textdomain-here'),
49-
'desc' => esc_html__('JQuery UI spinner description. Min:20, max: 100, step:20, default value: 40', 'your-textdomain-here'),
50-
'default' => '40',
51-
'min' => '20',
52-
'step' => '20',
53-
'max' => '100',
54-
) );
46+
Redux::set_field(
47+
'OPT_NAME',
48+
'SECTION_ID',
49+
array(
50+
'id' => 'opt-spinner',
51+
'type' => 'spinner',
52+
'title' => esc_html__('JQuery UI Spinner Example 1', 'your-textdomain-here'),
53+
'subtitle' => esc_html__('No validation can be done on this field type','your-textdomain-here'),
54+
'desc' => esc_html__('JQuery UI spinner description. Min:20, max: 100, step:20, default value: 40', 'your-textdomain-here'),
55+
'default' => '40',
56+
'min' => '20',
57+
'step' => '20',
58+
'max' => '100',
59+
'output' => array( '.content-area' => 'max-width' ),
60+
)
61+
);
5562
```
5663

5764
## Example Usage

0 commit comments

Comments
 (0)