wp.customize.controlConstructor['kirki-slider'] = wp.customize.kirkiDynamicControl.extend({
initKirkiControl: function() {
var control = this,
changeAction = ( 'postMessage' === control.setting.transport ) ? 'mousemove change' : 'change',
rangeInput = control.container.find( 'input[type="range"]' ),
textInput = control.container.find( 'input[type="text"]' ),
value = control.setting._value;
// Set the initial value in the text input.
textInput.attr( 'value', value );
// If the range input value changes copy the value to the text input.
rangeInput.on( 'mousemove change', function() {
textInput.attr( 'value', rangeInput.val() );
} );
// Save the value when the range input value changes.
// This is separate from the above because of the postMessage differences.
// If the control refreshes the preview pane,
// we don't want a refresh for every change
// but 1 final refresh when the value is changed.
rangeInput.on( changeAction, function() {
control.setting.set( rangeInput.val() );
} );
// If the text input value changes,
// copy the value to the range input
// and then save.
textInput.on( 'input paste change', function() {
rangeInput.attr( 'value', textInput.val() );
control.setting.set( textInput.val() );
} );
// If the reset button is clicked,
// set slider and text input values to default
// and hen save.
control.container.find( '.slider-reset' ).on( 'click', function() {
textInput.attr( 'value', control.params['default'] );
rangeInput.attr( 'value', control.params['default'] );
control.setting.set( textInput.val() );
} );
}
});