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();
?>
