<?php
declare(strict_types=1);
if ( ! defined( 'ABSPATH' ) ) { exit; }

/**
 * Range Slider Control.
 * @package WTE_Business_Card
 */
class WTE_Range_Control extends \WP_Customize_Control {
	public $type = 'wte-range';

	public function render_content(): void {
		$min  = $this->input_attrs['min'] ?? 0;
		$max  = $this->input_attrs['max'] ?? 100;
		$step = $this->input_attrs['step'] ?? 1;
		$uid  = 'wte-range-' . esc_attr( $this->id );
		?>
		<label class="wte-range-control">
			<?php if ( $this->label ) : ?>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php endif; ?>
			<div class="wte-range-control__row">
				<input type="range" id="<?php echo $uid; ?>" class="wte-range-control__slider"
					min="<?php echo esc_attr( (string) $min ); ?>"
					max="<?php echo esc_attr( (string) $max ); ?>"
					step="<?php echo esc_attr( (string) $step ); ?>"
					value="<?php echo esc_attr( (string) $this->value() ); ?>"
					oninput="document.getElementById('<?php echo $uid; ?>-out').value=this.value"
					<?php $this->link(); ?>
				>
				<output id="<?php echo $uid; ?>-out" class="wte-range-control__value"><?php echo esc_html( (string) $this->value() ); ?></output>
			</div>
		</label>
		<?php
	}
}
