Multirange: A tiny polyfill for HTML5 multi-handle sliders.
Features Only 0.6KB minified & gzipped! No dependencies. Uses feature detection, will not run if two-handle sliders are natively supported. Keyboard accessible Clicking on the track still works Handles can be moved past each other Customizable styling JS properties polyfilled too (input.value, input.valueLow, input.valueHigh) Limitations Requires support for <input type="range"> (duh). Fully works
datalist experiment
datalist experiment By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves. Options can be tagged with datalist and referenced from the input element using list attribute by its id. See examples below. input[type=text] datalist For text type, datalist simply suggests list of wo
レンジ入力（input[type=range]）の変更時の値をリアルタイムに取得する | 主にjQueryのメモ
/* 変更中（ドラッグ中） */ $( 'input[type=range]' ).on( 'input', function () { var val = $(this).val(); } ); /* 変更後 */ $( 'input[type=range]' ).change( function () { var val = $(this).val(); } ); HTML5のレンジ入力（input[type=range]）要素に関連するイベントは、変更後（ドラッグ後）はchangeイベントになるが、ドラッグ中はinputイベントになる。inputイベントは、汎用的なイベント関数であるon関数を利用すること。
CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」:phpspot開発日誌
slideControl.js jQuery Plugin CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」。 次のような綺麗なスライダーが実装出来ます。CSSでデザインされているので見た目を変更するのも容易で、スライダー自体のカスタマイズも可能。 CSS3非対応ブラウザでもスタイルはちゃんとあたってませんがちゃんと動くみたいです。 マークアップ的にも、<input type="text" value="4.0" class="slideControl" /> のような input type="text" のものを$('.slideControl').slideControl();のように初期化すればスライダー化して便利 関連エントリ 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新しい円形のスライダーが実装できる「Tin
jQueryでクールなボリュームコントロールを作成するチュートリアル:phpspot開発日誌
Creating a Volume Controller with jQuery UI Slider jQueryでクールなボリュームコントロールを作成するチュートリアル。 次のようなAppleっぽいデザインのボリュームコントロールを作るチュートリアルです。 デモページ ボリュームコントロールじゃなくてもこの作り方を覚えておけば、プログレスバーなり、１〜１００のパラメータ調整なり応用が効きそうです。 画像を使ったデザイン性の高い物を作っているので思ったデザインのコントロールは作れるようになりそうですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル Googleマップ関連のjQueryプラグインとチュートリアル集
AppleっぽいデザインのjQueryスライダーサンプル:phpspot開発日誌
jQuery UI Slider | Papermashup.com AppleっぽいデザインのjQueryスライダーサンプル。 次のようなデザインの美しいjQueryスライダーのデモと、ソースのダウンロードが可能です。 デモページはこちら これだけ導入したらそこだけデザインが浮きそうな気もしますが、カッコ良かったので反射的につい紹介。 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL Apple.comの新スライダーエフェクトを実装するjQueryプラグイン 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」
digitalskill.jp
Buy this domain. digitalskill.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Customising Cross-Browser Range Inputs with CSS and JavaScript | CSS-Tricks
the new code – not found – blog / 864
the new code – not found – blog / 757
my sliders [MOST DEMOS ARE NOW BROKEN] - a Collection by Ana Tudor on CodePen