На trackbar с двумя ползунками установить отсеки данных на каждый сверху
 

На trackbar с двумя ползунками установить отсеки данных на каждый сверху

function custom_checkout_fields() {
    $checkout = WC()->checkout(); ?>
    <div class="date-time">
	    <p><?php _e( 'Дата и время' ); ?></p>
	    <?php
	    foreach ( $checkout->checkout_fields['custom'] as $key => $field ) : ?>
	        <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
	    <?php endforeach; ?>
	    <div id="range-slider"></div>
	    <span class="slider-values"><span id="slider-value-lower">9:00</span><span> - </span><span id="slider-value-upper">17:00</span></span>

<script>
	    	var snapSlider = document.getElementById('range-slider');
			noUiSlider.create(snapSlider, {
				start: [ 12, 18 ],
				snap: true,
				connect: true,
				range: {
					'min': 10,
					'10%': 11,
					'20%': 12,
					'30%': 13,
					'40%': 14,
					'50%': 15,
					'60%': 16,
					'70%': 17,
					'80%': 18,
					'90%': 19,
					'max': 20
				}
			});
			var snapValues = [
				document.getElementById('slider-value-lower'),
				document.getElementById('slider-value-upper')
			];
			var timefield = document.getElementById('time');
			timefield.value = '12:00 - 18:00';

			snapSlider.noUiSlider.on('update', function( values, handle ) {
				snapValues[handle].innerHTML = parseInt(values[handle]) + ':00';
				timefield.value = parseInt(values[0]) + ':00 - ' + parseInt(values[1]) + ':00';
			});
	    </script>

Тут добавить отсечки времени над каждым сверху

О-----------------------------О 12:00 - 18:00 и над левым сделать 12 над правым позунком 18 и при движении что бы менялся) можете дать пример или сказать как это сделать? я не знаю js учусь читаю только)
Спасибо!:victory: