Untitled

add_action( 'forminator_before_form_render', 'wpmudev_number_change_to_slider', 10, 5 );
function wpmudev_number_change_to_slider( $id, $form_type, $post_id, $form_fields, $form_settings ){
	if( $id == 361 ){
		add_filter( 'forminator_field_number_markup', 'wpmudev_change_number_slider', 10, 5 );
	}
}
function wpmudev_change_number_slider( $html, $id, $required, $placeholder, $value ){
	if( $id == 'forminator-field-number-1' ){
		$html = str_replace('</label>', '</label><input id="rangeInput" type="range" min="1" max="150" value="1" step="1" style="appearance: auto" oninput="changeInputValue(this.value)" /><label class="forminator-label" for="selected-range">Selected Value - <span id="selected-range">1</span></label>', $html);
		$html = str_replace('type="number"', 'type="number" style="display:none" onkeyup="changeRangeValue(this.value)" onchange="changeRangeValue(1)"', $html);
	}
	return $html;
}

add_action('wp_footer', 'wpmudev_enqueue_script_number_slider', 9999);
function wpmudev_enqueue_script_number_slider(){
	global $post;
	if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) {
		return;
	}
	?>
	<script type="text/javascript">
	function showValue1(newValue) { 
		document.getElementById("selected-range").innerHTML= newValue;
	}

	function changeRangeValue(val){
		document.getElementById("rangeInput").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
		showValue1(val);
	}

	function changeInputValue(val){
		document.getElementById("forminator-field-number-1").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
		showValue1(val);
	}
	</script>
	<?php
}