Support

Account

Home Forums General Issues ACF 5 custom slider field type

Solved

ACF 5 custom slider field type

  • Im trying create a slider field for quickly choosing values. I found a cool slider script here: http://refreshless.com/nouislider/ but Im having trouble implementing it.
    If anyone has any advice on how I can do this it would be much appreciated. Thanks.

    Heres my attempt so far:

    <?php
    class acf_field_slider-field extends acf_field {
    	function __construct() {
    		
    		$this->name = 'slider-field';
    		
    		$this->label = __('Slider Field', 'acf-slider-field');
    
    		$this->category = 'basic';
    		
    		$this->defaults = array(
    			'max'	=> 100,
    			'min'	=> 0,
    			'step'	=> 0.1
    		);
    		
    		$this->l10n = array(
    			'error'	=> __('Error! Please enter a higher value', 'acf-slider-field'),
    		);
    		
    				
    		// do not delete!
        	parent::__construct();
        	
    	}
    	function render_field_settings( $field ) {
    		
    		acf_render_field_setting( $field, array(
    			'label'			=> __('Max','acf-slider-field'),
    			'instructions'	=> __('Set the maximum value','acf-slider-field'),
    			'type'			=> 'number',
    			'name'			=> 'max',
    		));
    		
    		acf_render_field_setting( $field, array(
    			'label'			=> __('Min','acf-slider-field'),
    			'instructions'	=> __('Set the mainimum value','acf-slider-field'),
    			'type'			=> 'number',
    			'name'			=> 'min',
    		));
    		acf_render_field_setting( $field, array(
    			'label'			=> __('Step','acf-slider-field'),
    			'instructions'	=> __('Set the step value','acf-slider-field'),
    			'type'			=> 'number',
    			'name'			=> 'step',
    		));
    	}
    	
    	function render_field( $field ) {
    		?>
    		<div id="<?php echo esc_attr($field['id']) ?>-slider"></div>
    		<input name="<?php echo esc_attr($field['name']) ?>" value="<?php echo esc_attr($field['value']) ?>"/>
    		<?php
    	}
    
    	function input_admin_enqueue_scripts() {
    		
    		$dir = plugin_dir_url( __FILE__ );
    
    		// register & include JS
    		wp_register_script( 'acf-input-slider-field', "{$dir}js/jquery.nouislider.min.js" );
    		wp_enqueue_script('acf-input-slider-field');
    		
    		
    		// register & include CSS
    		wp_register_style( 'acf-input-slider-field', "{$dir}css/jquery.nouislider.min.css" ); 
    		wp_enqueue_style('acf-input-slider-field');	
    	}
    	
    
    	function input_admin_head() {
    		?>
    		<script>
    			Link = $.noUiSlider.Link;
    			$('#<?php echo esc_attr($field['id']) ?>-slider').noUiSlider({
    				start: <?php echo esc_attr($field['value']) ?>,
    				step: <?php echo esc_attr($field['step']) ?>,
    				range: {
    					'min': <?php echo esc_attr($field['min']) ?>,
    					'max': <?php echo esc_attr($field['max']) ?>
    				},
    				serialization: {
    					lower: [
    						new Link({
    							target: $("#<?php echo esc_attr($field['id']) ?>")
    						})
    					]
    				}
    			});
    		</script>		
    		<?php
    	}
    }
    
    // create field
    new acf_field_slider-field();
    
    ?>
    
  • The link doesn’t work.

    I want to show values within a range slider. I’m a newbie so would like to ask – where do I start? I only managed to show the values as plain text as seen here https://www.advancedcustomfields.com/resources/range/

    But how can I show the actual range slider front end?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.