grailsとjquery-ui pluginでスライダーを表示する

grailsとjquery-ui pluginでスライダーを表示するには、以下の手順を実行します。

1. pluginのインストール

grails install-plugin jquery-ui

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- jquery-uiを使用 -->
<r:require module="jquery-ui"/>
        <r:layoutResources />

3. ビューのgspに以下のようなコードを追加します。

<div>
  <p>
    <label for="threshold">閾値：</label>
    <input type="text" name="threshold" id="threshold" />
  </p>
  <div id="slider"></div>
</div>
<script type="text/javascript">
  $(function(){
    $("#slider").slider({
      value:50,
      min: 0,
      max: 100,
      step: 5,
      slide: function(event, ui){
        $("#threshold").val(ui.value);
      }
    });
    $("#threshold").val($("#slider").slider("value"));
  });
</script>

出力画面

動作環境
grails 2.0.1