jQuery UI Railsでの製作Tips

RailsのフォームにjQuery UIのSliderを使う

投稿日:

jQuery UI Slider

slider
数値を選ぶ際に、視覚的にもわかりやすいし、ドラッグやワンクリックで選びたい数値を選ぶことができて便利.

ライブラリを読み込む

jquery-ui-railsなどを使い、application.jsなどで読み込んでおく.

コード

view

仕組みとしては、hidden_fieldを使い、slider用のdivは別に作る.
また数値表示用の箇所も用意しておく.
ケースによって、document.readyにする.

css

なにかマージンがリセットされるぽい.あと、display: inline-blockを使えばinlineでsliderを表示できる.その場合、widthを指定する必要がある.

できた

気が向いたらヘルパーにしよう.
screenshot

-jQuery UI, Railsでの製作Tips
-,

執筆者:

関連記事

Rails5でAjax処理をActionCableを使ってリアルタイム同期化

By: Mike Johnston – CC BY 2.0 目次1 はじめに2 サンプル掲示板3 ActionCableでリアルタイム化4 チャンネルを購読して、ストリームで分配する5 c …

jQuery UI Buttonsetの選択状態を変えたり、色を変えたり

  目次1 jQuery UI Buttonsの設定(Radioボタン)2 チェック状態を変えるには3 ボタンの色を変えるには4 チェックした要素のvalueを取得するには jQuery U …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok