以下の JavaScript は、同じページに送信コードがあるフォーム内にスライダーを作成します。
JavaScript からスライダーを表示するフォーム内のコードは次のとおりです。
<div id="outbox-bottom">Callback time selected <span style="font-size:9px">(Ex Weekends):</span> <span id="callback_selected"></span></div>
スライダーで選択された時間を、次のようにフォームで取得するために使用できる変数に取得する方法が必要です$time = $_POST['time'];
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
jQuery('#callback_selected').html("9 am");
var select = jQuery( "#callback" );
var slider = jQuery( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 12,
range: "min",
value: 1,
step: .5,
slide: function (event, ui) {
$time_int = ui.value;
if (ui.value < 5) {
$time_int = $time_int + 8;
if ($time_int.toString().substr(-2) == '.5') $time_int = $time_int.toString().split('.')[0] + ":30";
$time_selected = $time_int + " am";
} else {
$time_int = $time_int - 4;
if ($time_int.toString().substr(-2) == '.5') $time_int = $time_int.toString().split('.')[0] + ":30";
$time_selected = $time_int + " pm";
}
jQuery('#callback_selected').html($time_selected);
}
});
});
</script>