start_controls_section( 'content_section', [ 'label' => esc_html__( 'Content', 'metform' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->input_content_controls(['NO_PLACEHOLDER']); $this->end_controls_section(); $this->start_controls_section( 'settings_section', [ 'label' => esc_html__( 'Settings', 'metform' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->input_setting_controls(); $this->add_control( 'mf_input_validation_type', [ 'label' => __( 'Validation Type', 'metform' ), 'type' => \Elementor\Controls_Manager::HIDDEN, 'default' => 'none', ] ); $this->add_control( 'mf_input_min_length_range', [ 'label' => esc_html__( 'Min Length', 'metform' ), 'type' => Controls_Manager::NUMBER, 'step' => 1, 'default' => 0, 'frontend_available' => true, ] ); $this->add_control( 'mf_input_max_length_range', [ 'label' => esc_html__( 'Max Length', 'metform' ), 'type' => Controls_Manager::NUMBER, 'step' => 1, 'default' => 100, 'frontend_available' => true, ] ); $this->add_control( 'mf_input_steps_control', [ 'label' => esc_html__( 'Steps', 'metform' ), 'type' => Controls_Manager::NUMBER, 'default' => 1, ] ); $this->add_control( 'mf_input_range_control', [ 'label' => __( 'Dual range input:', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'true' => __( 'Yes', 'metform' ), 'false' => __( 'No', 'metform' ), 'return_value' => 'true', 'default' => 'false', ] ); $this->add_control( 'mf_input_range_important_note', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __( 'Important Note : For taking dual range input, You have to enter dual default value in the field Value (Exactly bottom of this notice field. ). Example: Min:10, Max:20', 'metform' ), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning', 'condition' => [ 'mf_input_range_control' => 'true' ] ] ); $this->add_control( 'mf_input_range_default_value', [ 'label' => esc_html__( 'Value', 'metform' ), 'type' => Controls_Manager::NUMBER, 'default' => 0, ] ); $this->input_get_params_controls(); $this->end_controls_section(); if(class_exists('\MetForm_Pro\Base\Package')){ $this->input_conditional_control(); } $this->start_controls_section( 'label_section', [ 'label' => esc_html__( 'Label', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'mf_input_label_status', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'mf_input_required', 'operator' => '===', 'value' => 'yes', ], ], ], ] ); $this->input_label_controls(); $this->end_controls_section(); $this->start_controls_section( 'input_section', [ 'label' => esc_html__( 'Range Track', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'mf_range_input_track_width', [ 'label' => esc_html__( 'Width', 'metform' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'default' => [ 'unit' => '%', 'size' => 100, ], 'selectors' => [ '{{WRAPPER}} .input-range__track' => 'width: {{SIZE}}{{UNIT}};', ] ] ); $this->add_control( 'mf_range_input_track_height', [ 'label' => esc_html__( 'Height', 'metform' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'default' => [ 'unit' => 'px', 'size' => 6 , ], 'selectors' => [ '{{WRAPPER}} .input-range__track' => 'height: {{SIZE}}{{UNIT}};', ] ] ); $this->input_controls(['NO_BACKGROUND','NO_BORDER']); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'mf_input_range_background', 'label' => esc_html__( 'Input Track Background', 'metform' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .input-range__track', ] ); $this->end_controls_section(); $this->start_controls_section( 'mf_range_input_slider_dot', [ 'label' => esc_html__( 'Range Slider', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'mf_range_input_slider_width', [ 'name' => 'mf_input_range_slider_widthh', 'label' => esc_html__( 'Width', 'metform' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'default' => [ 'unit' => 'px', 'size' => 16 , ], 'selectors' => [ '{{WRAPPER}} .input-range__slider' => 'width: {{SIZE}}{{UNIT}};', ] ] ); $this->add_control( 'mf_range_input_slider_height', [ 'name' => 'mf_input_range_slider_heightt', 'label' => esc_html__( 'Height', 'metform' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'default' => [ 'unit' => 'px', 'size' => 16 , ], 'selectors' => [ '{{WRAPPER}} .input-range__slider' => 'height: {{SIZE}}{{UNIT}};', ] ] ); $this->add_control( 'mf_range_input_slider_top', [ 'name' => 'mf_input_range_slider_top', 'label' => esc_html__( 'Top', 'metform' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ '%','px', 'em', 'rem', 'custom' ], 'default' => [ 'unit' => '%', 'size' => 50 , ], 'separator' => 'before', 'selectors' => [ '{{WRAPPER}} .input-range__slider-container' => 'top: {{SIZE}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'mf_input_range_slider_background', 'label' => esc_html__( 'Range Slider Background', 'metform' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .mf-input-wrapper .input-range__slider', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'mf_input_range_slider_border', 'label' => esc_html__( 'Range Slider Border', 'metform' ), 'selector' => '{{WRAPPER}} .mf-input-wrapper .input-range__slider', ] ); $this->add_control( 'mf_range_input_slider_border_radius', [ 'label' => esc_html__( 'Border Radius', 'metform' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .mf-input-wrapper .input-range__slider' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'mf_range_input_counter', [ 'label' => esc_html__( 'Counter', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'mf_input_range_counter_typgraphy', 'label' => esc_html__( 'Typography', 'metform' ), 'selector' => '{{WRAPPER}} .mf-input-wrapper .input-range__label-container', ] ); $this->add_control( 'mf_range_input_counter_width', [ 'label' => esc_html__( 'Width', 'metform' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 36 , ], 'selectors' => [ '{{WRAPPER}} .mf-input-wrapper .input-range__label-container' => 'width: {{SIZE}}{{UNIT}};', ] ] ); $this->add_control( 'mf_range_input_counter_height', [ 'label' => esc_html__( 'Height', 'metform' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 20, ], 'selectors' => [ '{{WRAPPER}} .mf-input-wrapper .input-range__label-container' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}}', ] ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'mf_input_range_slider_counter_background', 'label' => esc_html__( 'Range Slider Background', 'metform' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .mf-input-wrapper .input-range__label-container, {{WRAPPER}} .mf-input-wrapper .input-range__label-container::before', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'mf_input_range_slider_counter_border', 'label' => esc_html__( 'Range Slider Border', 'metform' ), 'selector' => '{{WRAPPER}} .mf-input-wrapper .input-range__label-container', ] ); $this->add_control( 'mf_range_input_counter_border_radius', [ 'label' => esc_html__( 'Border Radius', 'metform' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .mf-input-wrapper .input-range__label-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'mf_range_input_counter_box_shadow', 'label' => esc_html__( 'Box Shadow', 'metform' ), 'selector' => '{{WRAPPER}} .input-range__label-container', ] ); $this->end_controls_section(); $this->start_controls_section( 'help_text_section', [ 'label' => esc_html__( 'Help Text', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'mf_input_help_text!' => '' ] ] ); $this->input_help_text_controls(); $this->end_controls_section(); $this->insert_pro_message(); } protected function render($instance = []){ $settings = $this->get_settings_for_display(); $inputWrapStart = $inputWrapEnd = ''; extract($settings); $render_on_editor = true; $is_edit_mode = 'metform-form' === get_post_type() && \Elementor\Plugin::$instance->editor->is_edit_mode(); $configData = [ 'message' => $errorMessage = isset($mf_input_validation_warning_message) ? !empty($mf_input_validation_warning_message) ? $mf_input_validation_warning_message : esc_html__('This field is required.', 'metform') : esc_html__('This field is required.', 'metform'), 'type' => isset($mf_input_validation_type) ? $mf_input_validation_type : '', 'required' => isset($mf_input_required) && $mf_input_required == 'yes' ? true : false, 'expression' => isset($mf_input_validation_expression) && !empty(trim($mf_input_validation_expression)) ? trim($mf_input_validation_expression) : 'null' ]; /** * Loads the below markup on 'Editor' view, only when 'metform-form' post type */ if ( $is_edit_mode ): $inputWrapStart = '
'; endif; $class = (isset($settings['mf_conditional_logic_form_list']) ? 'mf-conditional-input' : ''); ?>
<${props.InputRange} maxValue=${} minValue=${} step=${} onChange=${(el) => { parent.handleMultipileRangeChange(el, '') }} value=${ parent.state.formData[''] ? {min: parent.state.formData['']['0'], max: parent.state.formData['']['1']} : {min: , max: } } ref=${input => { register({ name: "" }, parent.activateValidation()); !parent.state.formData[''] ? parent.state.formData[''] = : '' }} name="" /> <${props.InputRange} maxValue=${} minValue=${} step=${} onChange=${(el) => { parent.handleRangeChange(el, '') }} value=${ isNaN(Number(parent.state.formData[''])) ? = $mf_input_max_length_range ? esc_attr($mf_input_max_length_range) : esc_attr($multipile_value[0]); } else { echo esc_attr($mf_input_min_length_range); } ?> : (Number(parent.state.formData['']) == 0 ? 0 : Number(parent.state.formData[''])) isNaN(Number(parent.state.formData[''])) ? : (Number(parent.state.formData['']) == 0 ? 0 : Number(parent.state.formData[''])) } ref=${ input => { register({ name: "" }, parent.activateValidation()); if ( parent.getValue("") === '' && ) { parent.handleChange({ target: { name: '', value: '' } }); parent.setValue( '', '', true ); } } } name="" />
<${validation.ErrorMessage} errors=${validation.errors} name="" as=${html``} /> %s ', esc_html( \MetForm\Utils\Util::react_entity_support(trim($mf_input_help_text), $render_on_editor))) : ''); ?>