class-evf-field-range-slider.php — Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI 3.5.2

everest-forms / includes / fields / class-evf-field-range-slider.php

everest-forms / includes / fields Last commit date

class-evf-field-range-slider.php

583 lines

1	<?php
2	/**
3	* Range Slider field
4	*
5	* @package EverestForms\Fields
6	* @since 1.6.7
7	*/
8
9	defined( 'ABSPATH' ) \|\| exit;
10
11	/**
12	* EVF_Field_Range_Slider Class.
13	*
14	* Builder-scope (read-only) version shipped in the free plugin so the field can
15	* be shown LOCKED — with its real preview and readable settings — for the AI
16	* upsell. The full functional implementation (front-end display, validation,
17	* formatting, asset enqueues) lives in Everest Forms Pro, whose class loads in
18	* place of this one when the plugin is active (this file is only autoloaded when
19	* that class is not already defined). Keep `is_pro = true` so the field stays locked.
20	*/
21	class EVF_Field_Range_Slider extends EVF_Form_Fields {
22
23	/**
24	* Constructor.
25	*/
26	public function __construct() {
27	$this->name = esc_html__( 'Range Slider', 'everest-forms' );
28	$this->type = 'range-slider';
29	$this->icon = 'evf-icon evf-icon-range-slider';
30	$this->order = 140;
31	$this->group = 'advanced';
32	$this->is_pro = true;
33	$this->links = array(
34	'image_id' => '',
35	'vedio_id' => 'y_lsIjL7_lE',
36	);
37	$this->settings = array(
38	'basic-options' => array(
39	'field_options' => array(
40	'label',
41	'description',
42	'required',
43	'required_field_message_setting',
44	'required_field_message',
45	'step',
46	'min_max_values',
47	),
48	),
49	'advanced-options' => array(
50	'field_options' => array(
51	'meta',
52	'skin',
53	'handle_color',
54	'highlight_color',
55	'track_color',
56	'show_grid',
57	'show_prefix_postfix',
58	'use_text_prefix_postfix',
59	'show_slider_input',
60	'label_hide',
61	defined( 'EVF_PAYPALL_STANDARD_VERSION' ) \|\| defined( 'EVF_STRIPE_VERSION' ) ? 'enable_payment_slider' : '',
62	'default_value',
63	'css',
64	),
65	),
66	);
67
68	parent::__construct();
69	}
70
71	/**
72	* Step field option.
73	*
74	* @since 1.3.3
75	* @param array $field Field Data.
76	*/
77	public function step( $field ) {
78	$label = $this->field_element(
79	'label',
80	$field,
81	array(
82	'slug' => 'step',
83	'value' => esc_html__( 'Step', 'everest-forms' ),
84	'tooltip' => esc_html__( 'Allows users to enter specific legal number intervals.', 'everest-forms' ),
85	),
86	false
87	);
88	$input_field = $this->field_element(
89	'text',
90	$field,
91	array(
92	'type' => 'number',
93	'slug' => 'step',
94	'min' => '1',
95	'class' => 'evf-input-number-step',
96	'value' => ! empty( $field['step'] ) ? esc_attr( $field['step'] ) : 1,
97	),
98	false
99	);
100	$this->field_element(
101	'row',
102	$field,
103	array(
104	'slug' => 'step',
105	'content' => $label . $input_field,
106	)
107	);
108	}
109
110	/**
111	* Minimum/Maximum values field option.
112	*
113	* @since 1.3.3
114	* @param array $field Field Data.
115	*/
116	public function min_max_values( $field ) {
117	echo '<div class="everest-forms-border-container evf-range-slider-min-max">';
118	echo '<h4 class="everest-forms-border-container-title">' . esc_html__( 'Min/Max', 'everest-forms' ) . '</h4>';
119
120	ob_start();
121	$this->field_element(
122	'label',
123	$field,
124	array(
125	'slug' => 'min_max_values',
126	'value' => esc_html__( 'Minimum and Maximum values', 'everest-forms' ),
127	'tooltip' => esc_html__( 'Enter minimum and maximum values for the range slider field.', 'everest-forms' ),
128	)
129	);
130	echo '<div class="input-group-col-2">';
131	$this->field_element(
132	'text',
133	$field,
134	array(
135	'type' => 'number',
136	'slug' => 'min_value',
137	'class' => 'evf-input-number',
138	'value' => isset( $field['min_value'] ) ? esc_attr( $field['min_value'] ) : '',
139	'placeholder' => esc_html__( 'Min Value', 'everest-forms' ),
140	)
141	);
142	$this->field_element(
143	'text',
144	$field,
145	array(
146	'type' => 'number',
147	'slug' => 'max_value',
148	'class' => 'evf-input-number',
149	'value' => isset( $field['max_value'] ) ? esc_attr( $field['max_value'] ) : '',
150	'placeholder' => esc_html__( 'Max Value', 'everest-forms' ),
151	)
152	);
153	echo '</div>';
154	$output = ob_get_clean();
155
156	$this->field_element(
157	'row',
158	$field,
159	array(
160	'slug' => 'min_max_values',
161	'content' => $output,
162	)
163	);
164
165	echo '</div>';
166	}
167
168	/**
169	* Skin for the slider.
170	*
171	* @since 1.3.3
172	* @param array $field Field Data.
173	*/
174	public function skin( $field ) {
175	$label = $this->field_element(
176	'label',
177	$field,
178	array(
179	'slug' => 'skin',
180	'value' => esc_html__( 'Skin', 'everest-forms' ),
181	'tooltip' => esc_html__( 'Skin to use for the range slider.', 'everest-forms' ),
182	),
183	false
184	);
185	$input_field = $this->field_element(
186	'select',
187	$field,
188	array(
189	'type' => 'select',
190	'slug' => 'skin',
191	'class' => 'evf-range-slider-skin',
192	'options' => array(
193	'flat' => esc_html__( 'Flat', 'everest-forms' ),
194	'big' => esc_html__( 'Big', 'everest-forms' ),
195	'modern' => esc_html__( 'Modern', 'everest-forms' ),
196	'sharp' => esc_html__( 'Sharp', 'everest-forms' ),
197	'round' => esc_html__( 'Round', 'everest-forms' ),
198	'square' => esc_html__( 'Square', 'everest-forms' ),
199	),
200	'value' => ! empty( $field['skin'] ) ? esc_attr( $field['skin'] ) : 'round',
201	),
202	false
203	);
204	$this->field_element(
205	'row',
206	$field,
207	array(
208	'slug' => 'skin',
209	'content' => $label . $input_field,
210	)
211	);
212	}
213
214	/**
215	* Show or Hide grid for the slider.
216	*
217	* @since 1.3.3
218	* @param array $field Field Data.
219	*/
220	public function show_grid( $field ) {
221	$input_field = $this->field_element(
222	'toggle',
223	$field,
224	array(
225	'type' => 'checkbox',
226	'slug' => 'show_grid',
227	'class' => 'evf-range-slider-show-grid',
228	'value' => isset( $field['show_grid'] ) ? esc_attr( $field['show_grid'] ) : false,
229	'desc' => esc_html__( 'Show Grid For The Slider', 'everest-forms' ),
230	'tooltip' => esc_html__( 'Check this if you want to show grid for this Range Slider field.', 'everest-forms' ),
231	),
232	false
233	);
234	$this->field_element(
235	'row',
236	$field,
237	array(
238	'slug' => 'show_grid',
239	'content' => $input_field,
240	)
241	);
242	}
243
244	/**
245	* Show or Hide slider input.
246	*
247	* @since 1.3.3
248	* @param array $field Field Data.
249	*/
250	public function show_slider_input( $field ) {
251	$input_field = $this->field_element(
252	'toggle',
253	$field,
254	array(
255	'type' => 'checkbox',
256	'slug' => 'show_slider_input',
257	'class' => 'evf-show-slider-input',
258	'value' => isset( $field['show_slider_input'] ) ? esc_attr( $field['show_slider_input'] ) : false,
259	'desc' => esc_html__( 'Show Slider Input', 'everest-forms' ),
260	'tooltip' => esc_html__( 'Check this if you want to show input box of this Range Slider field.', 'everest-forms' ),
261	),
262	false
263	);
264	$this->field_element(
265	'row',
266	$field,
267	array(
268	'slug' => 'show_slider_input',
269	'content' => $input_field,
270	)
271	);
272	}
273
274	/**
275	* Show or Hide slider prefix/postfix.
276	*
277	* @since 1.3.3
278	* @param array $field Field Data.
279	*/
280	public function show_prefix_postfix( $field ) {
281	$input_field = $this->field_element(
282	'toggle',
283	$field,
284	array(
285	'type' => 'checkbox',
286	'slug' => 'show_prefix_postfix',
287	'class' => 'evf-show-slider-prefix-postfix',
288	'value' => isset( $field['show_prefix_postfix'] ) ? esc_attr( $field['show_prefix_postfix'] ) : false,
289	'desc' => esc_html__( 'Show Slider Prefix/Postfix', 'everest-forms' ),
290	'tooltip' => esc_html__( 'Check this if you want to show Prefix/Postfix of this Range Slider field.', 'everest-forms' ),
291	),
292	false
293	);
294	$this->field_element(
295	'row',
296	$field,
297	array(
298	'slug' => 'show_prefix_postfix',
299	'content' => $input_field,
300	)
301	);
302	}
303
304	/**
305	* Use texts in prefix and postfix.
306	*
307	* @since 1.3.3
308	* @param array $field Field Data.
309	*/
310	public function use_text_prefix_postfix( $field ) {
311	$input_field = $this->field_element(
312	'toggle',
313	$field,
314	array(
315	'type' => 'checkbox',
316	'slug' => 'use_text_prefix_postfix',
317	'class' => 'evf-use-text-prefix-postfix',
318	'value' => isset( $field['use_text_prefix_postfix'] ) ? esc_attr( $field['use_text_prefix_postfix'] ) : false,
319	'desc' => esc_html__( 'Use Texts for Prefix and Postfix', 'everest-forms' ),
320	'tooltip' => esc_html__( 'Check this if you want to use texts in prefix and postfix for this Range Slider field.', 'everest-forms' ),
321	),
322	false
323	);
324	$this->field_element(
325	'row',
326	$field,
327	array(
328	'slug' => 'use_text_prefix_postfix',
329	'content' => $input_field,
330	)
331	);
332
333	// Prefix/Postfix warning message.
334	echo '<div class="notice notice-warning evf-prefix-postfix-warning-message" style="margin:0 0 12px;"><p>';
335	printf(
336	'<b>%s</b>: %s <b>%s</b> %s.',
337	esc_html__( 'Warning', 'everest-forms' ),
338	esc_html__( 'If you don\'t check the option', 'everest-forms' ),
339	esc_html__( 'Use Texts for Prefix and Postfix', 'everest-forms' ),
340	esc_html__( 'then the min/max values will be used as prefix and postfix', 'everest-forms' )
341	);
342	echo '</p></div>';
343
344	echo '<div class="everest-forms-border-container evf-range-slider-prefix-postfix-texts">';
345	echo '<h4 class="everest-forms-border-container-title">' . esc_html__( 'Prefix/Postfix Texts', 'everest-forms' ) . '</h4>';
346	ob_start();
347	$this->field_element(
348	'label',
349	$field,
350	array(
351	'value' => esc_html__( 'Texts to use for prefix and postfix', 'everest-forms' ),
352	'tooltip' => esc_html__( 'Enter texts to show in prefix and postfix of this field.', 'everest-forms' ),
353	)
354	);
355	echo '<div class="input-group-col-2">';
356	$this->field_element(
357	'text',
358	$field,
359	array(
360	'type' => 'text',
361	'slug' => 'prefix_text',
362	'class' => 'evf-input-prefix-text',
363	'value' => isset( $field['prefix_text'] ) ? esc_attr( $field['prefix_text'] ) : '',
364	'placeholder' => esc_html__( 'Prefix Text', 'everest-forms' ),
365	)
366	);
367	$this->field_element(
368	'text',
369	$field,
370	array(
371	'type' => 'text',
372	'slug' => 'postfix_text',
373	'class' => 'evf-input-postfix-text',
374	'value' => isset( $field['postfix_text'] ) ? esc_attr( $field['postfix_text'] ) : '',
375	'placeholder' => esc_html__( 'Postfix Text', 'everest-forms' ),
376	)
377	);
378	echo '</div>';
379	$output = ob_get_clean();
380
381	$this->field_element(
382	'row',
383	$field,
384	array(
385	'slug' => 'min_max_values',
386	'content' => $output,
387	)
388	);
389
390	echo '</div>';
391	}
392
393	/**
394	* Change handle color.
395	*
396	* @since 1.3.3
397	* @param array $field Field Data.
398	*/
399	public function handle_color( $field ) {
400	$label = $this->field_element(
401	'label',
402	$field,
403	array(
404	'slug' => 'handle_color',
405	'value' => esc_html__( 'Slider Handle Color', 'everest-forms' ),
406	'tooltip' => esc_html__( 'Select color for the slider handle.', 'everest-forms' ),
407	),
408	false
409	);
410	$input_field = $this->field_element(
411	'text',
412	$field,
413	array(
414	'type' => 'text',
415	'slug' => 'handle_color',
416	'class' => 'evf-range-slider-handle-color',
417	'value' => isset( $field['handle_color'] ) ? esc_attr( $field['handle_color'] ) : '',
418	),
419	false
420	);
421	$this->field_element(
422	'row',
423	$field,
424	array(
425	'slug' => 'handle_color',
426	'content' => $label . $input_field,
427	)
428	);
429	}
430
431	/**
432	* Change slider highlight color.
433	*
434	* @since 1.3.3
435	* @param array $field Field Data.
436	*/
437	public function highlight_color( $field ) {
438	$label = $this->field_element(
439	'label',
440	$field,
441	array(
442	'slug' => 'highlight_color',
443	'value' => esc_html__( 'Slider Highlight Color', 'everest-forms' ),
444	'tooltip' => esc_html__( 'Select color for the slider highlight.', 'everest-forms' ),
445	),
446	false
447	);
448	$input_field = $this->field_element(
449	'text',
450	$field,
451	array(
452	'type' => 'text',
453	'slug' => 'highlight_color',
454	'class' => 'evf-range-slider-highlight-color',
455	'value' => isset( $field['highlight_color'] ) ? esc_attr( $field['highlight_color'] ) : '',
456	),
457	false
458	);
459	$this->field_element(
460	'row',
461	$field,
462	array(
463	'slug' => 'highlight_color',
464	'content' => $label . $input_field,
465	)
466	);
467	}
468
469	/**
470	* Change slider track color.
471	*
472	* @since 1.3.3
473	* @param array $field Field Data.
474	*/
475	public function track_color( $field ) {
476	$label = $this->field_element(
477	'label',
478	$field,
479	array(
480	'slug' => 'track_color',
481	'value' => esc_html__( 'Slider Track Color', 'everest-forms' ),
482	'tooltip' => esc_html__( 'Select color for the slider track.', 'everest-forms' ),
483	),
484	false
485	);
486	$input_field = $this->field_element(
487	'text',
488	$field,
489	array(
490	'type' => 'text',
491	'slug' => 'track_color',
492	'class' => 'evf-range-slider-track-color',
493	'value' => isset( $field['track_color'] ) ? esc_attr( $field['track_color'] ) : '',
494	),
495	false
496	);
497	$this->field_element(
498	'row',
499	$field,
500	array(
501	'slug' => 'track_color',
502	'content' => $label . $input_field,
503	)
504	);
505	}
506
507	/**
508	* Field preview inside the builder.
509	*
510	* Renders a static HTML/CSS slider that mirrors the IonRangeSlider output
511	* produced by the Pro class — no JS dependency needed for the locked preview.
512	*
513	* @param array $field Field data and settings.
514	*/
515	public function field_preview( $field ) {
516	// Label.
517	$this->field_preview_option( 'label', $field );
518
519	$min = isset( $field['min_value'] ) && '' !== $field['min_value'] ? (float) $field['min_value'] : 0;
520	$max = isset( $field['max_value'] ) && '' !== $field['max_value'] ? (float) $field['max_value'] : 10;
521	$default = isset( $field['default_value'] ) && '' !== $field['default_value'] ? (float) $field['default_value'] : $min;
522
523	// Clamp default to [min, max] and convert to a percentage position.
524	$default = max( $min, min( $max, $default ) );
525	$range = ( $max - $min ) > 0 ? ( $max - $min ) : 1;
526	$pct = round( ( $default - $min ) / $range * 100 );
527
528	$handle_color = ! empty( $field['handle_color'] ) ? esc_attr( $field['handle_color'] ) : '#5b8ced';
529	$highlight_color = ! empty( $field['highlight_color'] ) ? esc_attr( $field['highlight_color'] ) : '#5b8ced';
530	?>
531	<div class="everest-forms-range-slider">
532	<div class="evf-slider-group">
533	<div class="evf-slider" style="position:relative;padding:28px 10px 10px;">
534	<div style="position:relative;height:4px;background:#e2e8f0;border-radius:4px;">
535	<div style="position:absolute;left:0;width:<?php echo esc_attr( $pct ); ?>%;height:100%;background:<?php echo esc_attr( $highlight_color ); ?>;border-radius:4px;"></div>
536	<div style="position:absolute;left:<?php echo esc_attr( $pct ); ?>%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;background:<?php echo esc_attr( $handle_color ); ?>;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.18);">
537	<div style="position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:<?php echo esc_attr( $handle_color ); ?>;color:#fff;border-radius:4px;padding:1px 7px;font-size:11px;font-weight:500;white-space:nowrap;"><?php echo esc_html( $default ); ?></div>
538	</div>
539	</div>
540	<div style="display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#8a8a8a;">
541	<span><?php echo esc_html( $min ); ?></span>
542	<span><?php echo esc_html( $max ); ?></span>
543	</div>
544	</div>
545	<span class="evf-range-slider-reset-icon dashicons dashicons-image-rotate"></span>
546	</div>
547	</div>
548	<?php
549	// Description.
550	$this->field_preview_option( 'description', $field );
551	}
552
553	/**
554	* Enable payment slider.
555	*
556	* @since 1.3.3
557	* @param array $field Field Data.
558	*/
559	public function enable_payment_slider( $field ) {
560	$input_field = $this->field_element(
561	'toggle',
562	$field,
563	array(
564	'type' => 'checkbox',
565	'slug' => 'enable_payment_slider',
566	'class' => 'evf-enable-payment-slider',
567	'value' => isset( $field['enable_payment_slider'] ) ? esc_attr( $field['enable_payment_slider'] ) : false,
568	'desc' => esc_html__( 'Enable Payment Slider', 'everest-forms' ),
569	'tooltip' => esc_html__( 'Check this if you want use Range Slider as Payment Slider.', 'everest-forms' ),
570	),
571	false
572	);
573	$this->field_element(
574	'row',
575	$field,
576	array(
577	'slug' => 'enable_payment_slider',
578	'content' => $input_field,
579	)
580	);
581	}
582	}
583