kirki-framework / control-slider
Range slider control for the Kirki Customizer Framework
This package's canonical repository appears to be gone and the package has been frozen as a result.
Installs: 7 541
Dependents: 1
Suggesters: 0
Security: 0
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
Language:JavaScript
Requires
- php: >=7.0
- kirki-framework/control-base: *
README
A slider control package for Kirki Customizer Framework.
Table of Contents
Installation
First, install the package using composer:
composer require kirki-framework/control-slider
Then make sure you have included the autoloader:
require_once "your/path/to/vendor/autoload.php";
Usage
This control can be consumed using Kirki API or using WordPress Customizer API.
Using the simplified API
new \Kirki\Field\Slider( [ 'settings' => 'your_control_setting_id', 'label' => esc_html__( 'Your Control Label', 'your-text-domain' ), 'description' => esc_html__( 'Your control description.', 'your-text-domain' ), 'section' => 'your_section_id', 'default' => 5, 'choices' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ] );
Using the Customizer API
/** * Register customizer settings and controls. * * @param \WP_Customize_Manager $wp_customize The Customizer object. */ function your_customize_register_function( $wp_customize ) { // Add setting. $wp_customize->add_setting( 'your_control_setting_id', [ 'type' => 'theme_mod', // Or 'option'. 'capability' => 'edit_theme_options', 'default' => 5, 'transport' => 'postMessage', // Or 'refresh'. 'sanitize' => 'intval', // Or 'absint' or other int sanitization. ] ); // Add control. $wp_customize->add_control( new \Kirki\Control\Slider( $wp_customize, 'your_control_setting_id', [ 'label' => esc_html__( 'Your Control Label', 'your-text-domain' ), 'description' => esc_html__( 'Your control description.', 'your-text-domain' ), 'section' => 'your_section_id', 'choices' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ] ) ); // Add more settings... // Add more controls... } add_action( 'customize_register', 'your_customize_register_function' );
Development
If you want to make changes to this control, you can edit the JS files in the src
folder.
- If you haven't installed the packages, then run
npm install
- After done editing, run
npm run build