javascript jQuery的UI滑块

Posted 2021-05-04

var select = $( ".max-distance" );
				var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
					min: 1,
					max: 7,
					range: "min",
					value: select[ 0 ].selectedIndex + 1,
					create: function( event, ui ) {

						var distance = $('.distance'),
							handle = $('.ui-slider-handle'),
							km = select.find("option[value='" + select.val() + "']").html();

						distance.detach();
						handle.html(distance.html(km));
					},
					slide: function( event, ui ) {
						select[ 0 ].selectedIndex = ui.value - 1;

						var km = select.find("option[value='" + select.val() + "']").html();
						$('.distance').html(km);

					}
				});

				select.on( "change", function() {
					slider.slider( "value", this.selectedIndex + 1 );
				});