Om UI Widgets

This ClojureScript library for Om provides a sweet slider widget for your apps. More might follow.


Leiningen users add a dependency or dev dependency: [om-widgets "0.3.0"]

Getting started

In your .html you need to add the om-widgets.css file that ships with this repo and make it available on your local file system and/or web server. For your convenience the CSS ships with the releases and is placed (in jar resources) at path /www/css, so when serving resources with root www from a JVM server you can simply add:

<link rel="stylesheet" href="css/om-widgets.css">

In your NS statement put: (:require [om.widget.slider :refer [slider]])


(ns some.ns
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [om.widget.slider :refer [slider]]))

(defn example [db owner]
    (render-state [this {:keys [val]}]
      (dom/div #js{:style #js{:position "relative" :width "500px" :margin "auto"}}
        (dom/p nil
          (str "Value: " val)
          (slider :val owner))
        (dom/button #js{:onClick #(om/set-state! owner :val (rand-int 101))}
          "Random value")))))

(om/root example {} {:target (.getElementById js/document "slider")})

You can also pass optional keyword arguments to a slider: min, max, start-value, step, handle-class, handle-style, track-class, track-style, track-bg, left-bg, and right-bg. Please consult the doc string of the slider function and see the examples in the file test/test/om/widget/slider.cljs.

(slider :val owner :min -18.5 :max 4000 :step 0.5 :start-value -14.5)


Copyright © 2014 André Thieme
Distributed under the Eclipse Public License.