ETXRA

JavaScript Slider Controls

OS やアプリケーションの設定画面で普通に見かけるスライダー。これがなぜかウェブの世界にはありませんでした。 HTML5 にてようやく追加されることとなりましたが、対応ブラウザーが主流となるまでは、残念ながら気軽には使えないでしょう。

というわけで JavaScript で作りました。Safari, Firefox, IE8 で動作確認しています。本当は iPhone にも対応させたかったんですけど、タッチ関係の挙動は実機を持ってないと確かめられません (シミュレーターではちょっと無理)。なので動作未確認です。

HTML


		
		<!DOCTYPE html>

		<html>

		<head>

		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

		<title>JavaScript Slider Controls</title>

		<meta http-equiv="Content-Script-Type" content="text/javascript">

		<meta http-equiv="Content-Style-Type" content="text/css">

		
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]-->

		<link rel="stylesheet" href="slider.css" media="all" type="text/css" title="stylesheet">

		<script src="slider.js"></script>

		
		</head>

		<body>

		
		<canvas width="16" height="200" style="width:16px; height:200px" class="slider_vertical" data-defaultvalue="0.5"></canvas>

		<canvas width="16" height="200" style="width:16px; height:200px" class="nsSlider_vertical" data-defaultvalue="0.5"></canvas>

		<canvas width="27" height="200" style="width:27px; height:200px" class="iSlider_vertical" data-defaultvalue="0.5"></canvas>

		<canvas width="200" height="16" style="width:200px; height:16px" class="slider_horizontal" data-defaultvalue="0.5"></canvas>

		<canvas width="200" height="16" style="width:200px; height:16px" class="nsSlider_horizontal" data-defaultvalue="0.5"></canvas>

		<canvas width="200" height="27" style="width:200px; height:27px" class="iSlider_horizontal" data-defaultvalue="0.5"></canvas>

		<canvas width="94" height="27" style="width:94px; height:27px" class="slider_switch" data-defaultvalue="0"></canvas>

		
		</body>

		</html>

ダウンロードと使用条件

このスクリプトは販売している商品です。しかし自分自身で設定も使用も出来る、ウェブ業者以外の方に限って無料でお使いいただけます。転売・流用は禁止します。

Free for private and non commercial use.

DOWNLOAD