From d1b0de95dead14c8c0f2789ad8bc5b16bad5686e Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Mon, 19 Apr 2010 23:27:57 +0000
Subject: [PATCH] Made our own slider widget to use in conjunction with our
 histogram widget.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@503 7d457c2a-affb-35e4-300a-418c747d4874
---
 src/graphics/slider-brackets.psd              | Bin 37824 -> 33998 bytes
 .../gridworks/browsing/facets/RangeFacet.java |  63 +-----
 .../webapp/images/slider-left-bracket.png     | Bin 750 -> 2953 bytes
 .../webapp/images/slider-right-bracket.png    | Bin 718 -> 2951 bytes
 src/main/webapp/project.html                  |   2 +-
 .../scripts/dialogs/clustering-dialog.js      |  47 ++---
 src/main/webapp/scripts/facets/range-facet.js | 193 +++++++-----------
 .../scripts/widgets/histogram-widget.js       |  53 +----
 .../webapp/scripts/widgets/slider-widget.js   | 180 ++++++++++++++++
 .../styles/dialogs/clustering-dialog.css      |   3 +-
 src/main/webapp/styles/project/browsing.css   |  12 +-
 .../webapp/styles/widgets/slider-widget.css   |  45 ++++
 12 files changed, 344 insertions(+), 254 deletions(-)
 create mode 100644 src/main/webapp/scripts/widgets/slider-widget.js
 create mode 100644 src/main/webapp/styles/widgets/slider-widget.css

diff --git a/src/graphics/slider-brackets.psd b/src/graphics/slider-brackets.psd
index 705dc32779b1533ccd3e8b46e25d35bab37b5d8c..3521aff12751ffdf2d64710ef93d3e733eb55d5a 100644
GIT binary patch
delta 3946
zcmeGeZERCj^t`@yn`2|sOc`OyK<1odxNcq7PNQ_)3I#Tx6lWGOzO9e3t$kfyU#B=m
zHHH{S6x<UG^NWEfL`)<FiD*zk(qLc#6O8h;Et!D9$OsX)x$S!Hd#|v8CYzbTAN2Oz
zbM86ko{#%+?)&;9UHe*{%Tl~(2{54k^oTqP!~v_a8u~58&N4lf0K}&00PqhAFGJxa
zU%c|n)knWcZQI&Z^T}b)$^E;Z*r!W2<ruAQqq!*0SY)*3<QB>X)_e;yJfCHmbeq*=
zE4G!G%|=s6iNk2LT1)dw%_YUTd5+=|N4_I0=yhzm#csD0nyj``hsoivSqm-2R=Y93
zz-GzKx8<7)3d0*>cgzd1zbP>#Cb&gT2sCgaFI2BoqrF#=Jb-;7xIqLC1PDL_Vi9<x
zt6`;@7kgRJoCrXOLgAV)s*M6=d^h&EVz)@|hgd4dr3&Y{tV|B0tP))=g{iGtt}@m!
zsx(I(0mxgHn2U7Ra2SV>jG%3b5cGO+M7JZZiVN`NoR4>xKJCV_0hVG4JSG5PpZkC=
zJhP%HAtOd{n}Bj)Td|{d)J+9uCO{AaU{{BaRxi+nTAcH($5v!~3)alpo7Y#LN{hsr
zdTeiOJ->fbaC3#lnX>25l+z2_v+K7JII@R8{m{-MS^Ha@Gq%rYab`JZw9Ip1_dYrC
zySv4ik%i2K4{o$yx!hcyTq#|h+FD^hL7@9oXfFYGw|Cd$t3Et@ti{rBe0}RC^JB)H
z(|iRjl|QY$;954|az!o7LyInS@g@QCz1+j6%YW81hQ$?nCeegvDLs0q<X37pnhoFi
z{0$P#R7(_*vI}hVNK*#Uen>Kuly_I8geXCU`Y7>Fm?}}t@rBTM8yurO^gqrSjm=(Y
ze3x@<&e3=1wq{Sz|LqOn&i?<K14wIu_G9KEaidO8baP@2FD>CEsaB{7pp4dWD3c`n
z!m7GzB-M%(U(QLjjr`(JkfTMJ)-5RZrl))TLJg8MD3~J(BgQVzNV!`S0#$y$ms*^_
zc|2vj#CbT0i}K=^*Lrz}U-WSjF9dz474Nvt!I5E6`J7OmiSla&i5I<GHSeL5kpl^W
zzl@V4-tPDM#VB)%H0(Vssg+jnqRm_57m@O5E|P9yQ(NVJfk%}3H?ujPKPX6A*2?Re
z)JCU3jxWH|ihg5h_1Y6i(~W(K7X!6^Av#f=xs^_YIA6f@JYpSv0F$=KDRqtdU|nXu
z{CZubO8i=v&3quI*3Z<#I}n4<z+{=LPh(kN<z)AyrB&}Og~gZFfcwQR1v@Hy3f4hU
z*IZb}eXQX6HB+x+9SA8+Ksm!P)r1MpA(+UJ{H1pmGeN%O?Jb;y!KEW)BRoPM9>i}U
z0JxOX;ZnY>@RQ70CgAQ7co;?O206L0Fwsc4-sLak;X%^N&kB<nRu&pRpS65Z(l1-6
z3H8``{K2Z(!+7*)4daDhZhD9@7*N?D?^>0`fZQqN-V-*`hKCPVSf%CE=4rA$IGu@+
z8+=cO-)_FB4>5S6W3k2HcZUJLaz-}Fi%~S<20+g)-hOmo5SYv(gJcL8@!9}Qc3nSu
zsOTe1Om`oF%3cE75q?DI(SXvFhcYJSG-^_HocUTmxsQO3ZR#5!npx__z2m5S`K9d4
zKgg)sSaq{TWfgsc-1=&n+|itn84q`1i^Hb&l!`W$Lp9>%<IQdV16@&0TQ^<)bag`L
z4ABo=Xg|0oLe3KA>Y>4Kgq$PH+0O=$=pgVzKjKaTKldT-BFx|yDgoWS3Ip0T{FR3H
z-Grn3sGc^D89YD@b!Ka((bY-ns)Oi;PVJ@6uZKe;Jb&z9I3l;LZo3ojf4aU>2;Ln-
zJEL9r2%J@~d<4#^mp%d=%C(O`C(x@Lfi6&PKPBibS1{gq1>@~ka8GY2N{kdl6}5><
giMU}JU16P|F4aOYEF2mk77G-PF0TcnQyZPuUo&Kp$p8QV

delta 6840
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

diff --git a/src/main/java/com/metaweb/gridworks/browsing/facets/RangeFacet.java b/src/main/java/com/metaweb/gridworks/browsing/facets/RangeFacet.java
index 24a42896b..c1c526242 100644
--- a/src/main/java/com/metaweb/gridworks/browsing/facets/RangeFacet.java
+++ b/src/main/java/com/metaweb/gridworks/browsing/facets/RangeFacet.java
@@ -23,7 +23,6 @@ public class RangeFacet implements Facet {
     protected String     _name;       // name of facet
     protected String     _expression; // expression to compute numeric value(s) per row
     protected String     _columnName; // column to base expression on, if any
-    protected String     _mode;       // "range", MIN, MAX
     
     protected double    _from; // the numeric selection
     protected double    _to;
@@ -76,7 +75,6 @@ public class RangeFacet implements Facet {
         writer.key("name"); writer.value(_name);
         writer.key("expression"); writer.value(_expression);
         writer.key("columnName"); writer.value(_columnName);
-        writer.key("mode"); writer.value(_mode);
         
         if (_errorMessage != null) {
             writer.key("error"); writer.value(_errorMessage);
@@ -98,14 +96,8 @@ public class RangeFacet implements Facet {
                 }
                 writer.endArray();
                 
-                if (MIN.equals(_mode)) {
-                    writer.key(FROM); writer.value(_from);
-                } else if (MAX.equals(_mode)) {
-                    writer.key(TO); writer.value(_to);
-                } else {
-                    writer.key(FROM); writer.value(_from);
-                    writer.key(TO); writer.value(_to);
-                }
+                writer.key(FROM); writer.value(_from);
+                writer.key(TO); writer.value(_to);
             }
             
             writer.key("baseNumericCount"); writer.value(_baseNumericCount);
@@ -143,24 +135,9 @@ public class RangeFacet implements Facet {
             _errorMessage = e.getMessage();
         }
         
-        _mode = o.getString("mode");
-        if (MIN.equals(_mode)) {
-            if (o.has(FROM)) {
-                _from = o.getDouble(FROM);
-                _selected = true;
-            }
-        } else if (MAX.equals(_mode)) {
-            if (o.has(TO)) {
-                _to = o.getDouble(TO);
-                _selected = true;
-            }
-        } else {
-            if (o.has(FROM) && o.has(TO)) {
-                _from = o.getDouble(FROM);
-                _to = o.getDouble(TO);
-                _selected = true;
-            }
-        }
+        _from = o.getDouble(FROM);
+        _to = o.getDouble(TO);
+        _selected = true;
         
         _selectNumeric = JSONUtilities.getBoolean(o, "selectNumeric", true);
         _selectNonNumeric = JSONUtilities.getBoolean(o, "selectNonNumeric", true);
@@ -174,31 +151,13 @@ public class RangeFacet implements Facet {
 
     public RowFilter getRowFilter() {
         if (_eval != null && _errorMessage == null && _selected) {
-            if (MIN.equals(_mode)) {
-                return new ExpressionNumberComparisonRowFilter(
-                        _eval, _columnName, _cellIndex, _selectNumeric, _selectNonNumeric, _selectBlank, _selectError) {
-                    
-                    protected boolean checkValue(double d) {
-                        return d >= _from;
-                    };
+            return new ExpressionNumberComparisonRowFilter(
+                    _eval, _columnName, _cellIndex, _selectNumeric, _selectNonNumeric, _selectBlank, _selectError) {
+                
+                protected boolean checkValue(double d) {
+                    return d >= _from && d < _to;
                 };
-            } else if (MAX.equals(_mode)) {
-                return new ExpressionNumberComparisonRowFilter(
-                        _eval, _columnName, _cellIndex, _selectNumeric, _selectNonNumeric, _selectBlank, _selectError) {
-                    
-                    protected boolean checkValue(double d) {
-                        return d < _to;
-                    };
-                };
-            } else {
-                return new ExpressionNumberComparisonRowFilter(
-                        _eval, _columnName, _cellIndex, _selectNumeric, _selectNonNumeric, _selectBlank, _selectError) {
-                    
-                    protected boolean checkValue(double d) {
-                        return d >= _from && d < _to;
-                    };
-                };
-            }        
+            };
         } else {
             return null;
         }
diff --git a/src/main/webapp/images/slider-left-bracket.png b/src/main/webapp/images/slider-left-bracket.png
index 50e896371be0391ada4f3edd945020d369b8da05..be02f6f011f757ac62a34e02e436a81e7ab2cb86 100644
GIT binary patch
literal 2953
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

literal 750
zcmV<K0ulX*P)<h;3K|Lk000e1NJLTq000;O001Be1^@s62wu220000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!kV!;ARCwC7mQ83AK@`W|Zob+k#q@*3
zf{2<(j0tJenl?#MFijIlrHF!OMG*1q&4X8aQ1GOeo(tZ@Q!i03YVEBBp*^H(p{CiG
zm~3{lpEFLDP;6tdNu~qK!Z6J5z5l%V&tovgaGZlV3Lue4*vT(KzSV3tE3^Y(kFsd&
z;^~La9t55{?d+p=Gx#qcol4Fmr@ZmArgb0B3s$NCA`KfJ4bEL2$z7|I@*pd!g(~3W
zkmJU!>7hxBy4zEzYK`+^r~ydyj_`Om9XhcUhdKwMjG>cyI}{K+KXNA>#8HqrMpt-1
zsIzir4~hO%blgAX>&u0(R02ss9p8h00xpF-_fj4%gXJP%wFY|U`?mtFXHuz5{7kGL
z@`FI42c&j&li35(SVE)W`H1WLRV<O{^*Wiw^Z<U3`|j<SJz|zQE0!xHdcA8eV*i%r
zW^!!a@7SEg5(l75T}QtU5C{Y^QCDsj*9(A2SrUDyxTyh1%_e6u6Ar&wCDKqh*cQNr
zbFQ$rKOe+$nVK~F0Eo4_oosm+G?DC$faYLHY4%zztjUB$D>kH|`@%IcFd3R7ne0vf
z`D_4$d`VIOY1HL00OXCuHeBU@i%@J#&`!cQWWFYTUE5~XXw`lTpd`SDr4{BgCf3lf
zeVSPq03uVVuIL+Y*R5GuMZ}&lHOQV-6l&(zi=P}HcgjetiU<^q4rC8NvXC^eJ-xp)
z@bb%+{&TmYK}|xS=}ijm63~PQy?u@+iz~w~UcF<MH+K}Y{YwL`ssk?}hCtfxD$EBb
znyukNCUs@w@tfk0pu0BVb0aSc*rp@hM71|1HZo{o)#<vx$N0KF;BxkSTYkT~K)v}r
g_U^iy@kf9G0FI<GVq#5RDF6Tf07*qoM6N<$f{Mvj&;S4c

diff --git a/src/main/webapp/images/slider-right-bracket.png b/src/main/webapp/images/slider-right-bracket.png
index c4593c60edf6543492446ed98a3c6296522baf72..ab956e9a2d59e6eda84f965f5921307e82e3dbcc 100644
GIT binary patch
literal 2951
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

literal 718
zcmV;<0x|uGP)<h;3K|Lk000e1NJLTq000;O001Be1^@s62wu220000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!a7jc#RCwC7md$GuK@`B>Zg%snt<jpU
zTBRODj8>BpM6oT2rWAXqD2P?-&5QQz-G4wm`v(Yms3Lfilpw7_L<?Fl613C^+Qu~B
z`!Qe6CMgvWG<EV|*~{$w_V;Gy&65~o(8*BR{U9EX`}ix$pL8;rto?1g+%6z8aPaos
z>A`#bLD%(v8Q(U*vMk!~%N+>!nW4m)*lFPa(=-Xgb+{ZZOsWzd<|&hf0vMwJl!C{p
z_%22&;cgF^5DI7p1xb?O+!13OV;tocez5?)wQUoZD#_QP)ssO#x+>V9K>^?vqle6q
z9bPlUE%piqG)+{83^#|X7q)w?N$~~^3kmuHOgpi!J}{PuCBz!EEMyLuI<B8bgbwjk
zsbT>w3%^@--#Ar{^lrgZf&onnPJy!_b9``jeQ0cSBUNGmwuOBFxyhAi^%BKsL@;0-
z!oaD3JGQ@gc)d;u1Z>2yJyyi8m`6JRXkK1Dej3b|vDPsI#lf6}AQ#`V9^nA{3PzaM
zDoPyCC?<jf6M&jQK}WKkFI^~r@+s>Ug{3?#Zu7}SerGeG0247NR0zDvvSpXs`&Q^8
z6MoK0bpp8`7~bUE3l?+E3Io`wsptfjRuIg*#*5v7K#HfQ@ZSKt1Yy!lOXjNu3!g3X
z-AW*ZCEtThH(tNauJZ+5DG|tivtT}h3Qrcho@(08Tm0{hO#=|JC^gpDYN-aF_{7=o
zh|Z*Gx*`RiX<FdU@7-S8fZ|%g$}X=;FEd6t^#OhPnD@R9_U?N4Vs`Gakls{bMrHa@
z*L_v;>2B}V`5sN3d)`{mKZVrk?plTp$4>zU0I;+frlQ?hEC2ui07*qoM6N<$f`HjX
AWdHyG

diff --git a/src/main/webapp/project.html b/src/main/webapp/project.html
index 38983e757..e07849d56 100644
--- a/src/main/webapp/project.html
+++ b/src/main/webapp/project.html
@@ -1 +1 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>Freebase Gridworks</title>
    <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" />
    <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css" />
    <link type="text/css" rel="stylesheet" href="externals/imgareaselect/css/imgareaselect-default.css" />
    
    <link rel="stylesheet" href="/styles/common.css" />
    <link rel="stylesheet" href="/styles/jquery-ui-overrides.css" />
    
    <link rel="stylesheet" href="/styles/util/menu.css" />
    <link rel="stylesheet" href="/styles/util/dialog.css" />
    <link rel="stylesheet" href="/styles/util/custom-suggest.css" />

    <link rel="stylesheet" href="/styles/project.css" />
    <link rel="stylesheet" href="/styles/project/browsing.css" />
    <link rel="stylesheet" href="/styles/project/process.css" />
    <link rel="stylesheet" href="/styles/project/menu-bar.css" />

    <link rel="stylesheet" href="/styles/widgets/histogram-widget.css" />
    <link rel="stylesheet" href="/styles/widgets/history.css" />
        
    <link rel="stylesheet" href="/styles/views/data-table-view.css" />
    
    <link rel="stylesheet" href="/styles/dialogs/expression-preview-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/recon-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/clustering-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/scatterplot-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/extend-data-preview-dialog.css" />
    
    <link rel="stylesheet" href="/styles/protograph/schema-alignment-dialog.css" />
    
    <script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script>
    <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="externals/imgareaselect/jquery.imgareaselect.js"></script>
    <script type="text/javascript" src="externals/date.js"></script>
    
    <script type="text/javascript" src="scripts/util/misc.js"></script>
    <script type="text/javascript" src="scripts/util/url.js"></script>
    <script type="text/javascript" src="scripts/util/string.js"></script>
    <script type="text/javascript" src="scripts/util/ajax.js"></script>
    <script type="text/javascript" src="scripts/util/menu.js"></script>
    <script type="text/javascript" src="scripts/util/dialog.js"></script>
    <script type="text/javascript" src="scripts/util/dom.js"></script>
    <script type="text/javascript" src="scripts/util/custom-suggest.js"></script>

    <script type="text/javascript" src="scripts/widgets/histogram-widget.js"></script>
    <script type="text/javascript" src="scripts/widgets/history-widget.js"></script>
    <script type="text/javascript" src="scripts/widgets/process-widget.js"></script>
    
    <script type="text/javascript" src="scripts/project.js"></script>
    <script type="text/javascript" src="scripts/project/menu-bar.js"></script>
    <script type="text/javascript" src="scripts/project/browsing-engine.js"></script>
    <script type="text/javascript" src="scripts/project/scripting.js"></script>
    
    <script type="text/javascript" src="scripts/facets/list-facet.js"></script>
    <script type="text/javascript" src="scripts/facets/range-facet.js"></script>
    <script type="text/javascript" src="scripts/facets/scatterplot-facet.js"></script>
    <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script>
    
    <script type="text/javascript" src="scripts/views/data-table-view.js"></script>
    <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script>
    <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script>
    
    <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/clustering-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/scatterplot-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/extend-data-preview-dialog.js"></script>
    
    <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script>
    <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script>
    <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script>
</head>
<body>
    <div id="header">
        <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
        <div id="path"><span class="app-path-section"><a href="./index.html">Gridworks</a></span></div>
    </div>
    
    <div id="body">
        <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div>
    </div>

    <div id="footer">
        <a href="about.html">About Freebase Gridworks</a>
        &bull; 
        &copy; 2010 <a href="http://www.metaweb.com/">Metaweb Technologies, Inc.</a>
    </div>
</body>
</html>
\ No newline at end of file
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>Freebase Gridworks</title>
    <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" />
    <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css" />
    <link type="text/css" rel="stylesheet" href="externals/imgareaselect/css/imgareaselect-default.css" />
    
    <link rel="stylesheet" href="/styles/common.css" />
    <link rel="stylesheet" href="/styles/jquery-ui-overrides.css" />
    
    <link rel="stylesheet" href="/styles/util/menu.css" />
    <link rel="stylesheet" href="/styles/util/dialog.css" />
    <link rel="stylesheet" href="/styles/util/custom-suggest.css" />

    <link rel="stylesheet" href="/styles/project.css" />
    <link rel="stylesheet" href="/styles/project/browsing.css" />
    <link rel="stylesheet" href="/styles/project/process.css" />
    <link rel="stylesheet" href="/styles/project/menu-bar.css" />

    <link rel="stylesheet" href="/styles/widgets/history.css" />
    <link rel="stylesheet" href="/styles/widgets/histogram-widget.css" />
    <link rel="stylesheet" href="/styles/widgets/slider-widget.css" />
        
    <link rel="stylesheet" href="/styles/views/data-table-view.css" />
    
    <link rel="stylesheet" href="/styles/dialogs/expression-preview-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/recon-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/clustering-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/scatterplot-dialog.css" />
    <link rel="stylesheet" href="/styles/dialogs/extend-data-preview-dialog.css" />
    
    <link rel="stylesheet" href="/styles/protograph/schema-alignment-dialog.css" />
    
    <script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script>
    <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="externals/imgareaselect/jquery.imgareaselect.js"></script>
    <script type="text/javascript" src="externals/date.js"></script>
    
    <script type="text/javascript" src="scripts/util/misc.js"></script>
    <script type="text/javascript" src="scripts/util/url.js"></script>
    <script type="text/javascript" src="scripts/util/string.js"></script>
    <script type="text/javascript" src="scripts/util/ajax.js"></script>
    <script type="text/javascript" src="scripts/util/menu.js"></script>
    <script type="text/javascript" src="scripts/util/dialog.js"></script>
    <script type="text/javascript" src="scripts/util/dom.js"></script>
    <script type="text/javascript" src="scripts/util/custom-suggest.js"></script>

    <script type="text/javascript" src="scripts/widgets/history-widget.js"></script>
    <script type="text/javascript" src="scripts/widgets/process-widget.js"></script>
    <script type="text/javascript" src="scripts/widgets/histogram-widget.js"></script>
    <script type="text/javascript" src="scripts/widgets/slider-widget.js"></script>
    
    <script type="text/javascript" src="scripts/project.js"></script>
    <script type="text/javascript" src="scripts/project/menu-bar.js"></script>
    <script type="text/javascript" src="scripts/project/browsing-engine.js"></script>
    <script type="text/javascript" src="scripts/project/scripting.js"></script>
    
    <script type="text/javascript" src="scripts/facets/list-facet.js"></script>
    <script type="text/javascript" src="scripts/facets/range-facet.js"></script>
    <script type="text/javascript" src="scripts/facets/scatterplot-facet.js"></script>
    <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script>
    
    <script type="text/javascript" src="scripts/views/data-table-view.js"></script>
    <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script>
    <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script>
    
    <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/clustering-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/scatterplot-dialog.js"></script>
    <script type="text/javascript" src="scripts/dialogs/extend-data-preview-dialog.js"></script>
    
    <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script>
    <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script>
    <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script>
</head>
<body>
    <div id="header">
        <a id="logo" href="http://www.freebase.com/" title="Freebase"><img alt="Freebase" src="images/freebase-headerlogo.png" /></a>
        <div id="path"><span class="app-path-section"><a href="./index.html">Gridworks</a></span></div>
    </div>
    
    <div id="body">
        <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div>
    </div>

    <div id="footer">
        <a href="about.html">About Freebase Gridworks</a>
        &bull; 
        &copy; 2010 <a href="http://www.metaweb.com/">Metaweb Technologies, Inc.</a>
    </div>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/webapp/scripts/dialogs/clustering-dialog.js b/src/main/webapp/scripts/dialogs/clustering-dialog.js
index 2a309f785..009ed95b5 100644
--- a/src/main/webapp/scripts/dialogs/clustering-dialog.js
+++ b/src/main/webapp/scripts/dialogs/clustering-dialog.js
@@ -476,31 +476,28 @@ ClusteringDialog.Facet = function(dialog, title, property, elmt, clusters) {
         elmt.addClass("clustering-dialog-facet");
         var html = $(
             '<div class="clustering-dialog-facet-header">' + title + '</div>' +
-            '<div class="clustering-dialog-facet-histogram" bind="histogramContainer"></div>' +
-            '<div class="clustering-dialog-facet-slider" bind="slider"></div>' +
+            '<div class="clustering-dialog-facet-slider" bind="sliderWidgetDiv">' +
+                '<div class="clustering-dialog-facet-histogram" bind="histogramContainer"></div>' +
+            '</div>' +
             '<div class="clustering-dialog-facet-selection" bind="selectionContainer"></div>'
         ).appendTo(elmt);
         
         this._elmts = DOM.bind(html);
         
         this._histogram = new HistogramWidget(this._elmts.histogramContainer, { binColors: [ "#ccccff", "#6666ff" ] });
-
-        this._elmts.slider.slider({
-            min: this._min,
-            max: this._max,
-            values: [ this._from, this._to ],
-            slide: function(evt, ui) {
-                self._from = ui.values[0];
-                self._to = ui.values[1];
-                self._setRangeIndicators();
-            },
-            stop: function(evt, ui) {
-                self._from = ui.values[0];
-                self._to = ui.values[1];
-                self._setRangeIndicators();
-                self._dialog._updateAll();
-            }
+        this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
+        
+        this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {
+            self._from = data.from;
+            self._to = data.to;
+            self._setRangeIndicators();
+        }).bind("stop", function(evt, data) {
+            self._from = data.from;
+            self._to = data.to;
+            self._setRangeIndicators();
+            self._dialog._updateAll();
         });
+
         this._setRangeIndicators();
     }
 };
@@ -531,19 +528,23 @@ ClusteringDialog.Facet.prototype.update = function(clusters) {
     
     var bins = this._computeDistribution(clusters);
 
+    this._sliderWidget.update(
+        this._min, 
+        this._max, 
+        this._step, 
+        this._from,
+        this._to
+    );
     this._histogram.update(
         this._min, 
         this._max, 
         this._step, 
-        [ this._baseBins, bins ],
-        this._from,
-        this._to
+        [ this._baseBins, bins ]
     );
 };
 
 ClusteringDialog.Facet.prototype._setRangeIndicators = function() {
-    this._histogram.highlight(this._from, this._to);
-    this._elmts.selectionContainer.text(this._from + " to " + this._to);
+    this._elmts.selectionContainer.html(this._from + " &mdash; " + this._to);
 };
 
 ClusteringDialog.Facet.prototype._computeDistribution = function(clusters) {
diff --git a/src/main/webapp/scripts/facets/range-facet.js b/src/main/webapp/scripts/facets/range-facet.js
index d72630522..4288765cf 100644
--- a/src/main/webapp/scripts/facets/range-facet.js
+++ b/src/main/webapp/scripts/facets/range-facet.js
@@ -26,21 +26,16 @@ function RangeFacet(div, config, options) {
 }
 
 RangeFacet.prototype.reset = function() {
-    switch (this._config.mode) {
-    case "min":
-        this._from = this._config.min;
-        this._sliderDiv.slider("value", this._from);
-        break;
-    case "max":
-        this._to = this._config.max;
-        this._sliderDiv.slider("value", this._to);
-        break;
-    default:
-        this._from = this._config.min;
-        this._to = this._config.max;
-        this._sliderDiv.slider("values", 0, this._from);
-        this._sliderDiv.slider("values", 1, this._to);
-    }
+    this._from = this._config.min;
+    this._to = this._config.max;
+    this._sliderWidget.update(
+        this._config.min, 
+        this._config.max, 
+        this._config.step, 
+        this._from,
+        this._to
+    );
+        
     this._selectNumeric = true;
     this._selectNonNumeric = true;
     this._selectBlank = true;
@@ -69,7 +64,6 @@ RangeFacet.prototype.getJSON = function() {
     var o = {
         type: "range",
         name: this._config.name,
-        mode: this._config.mode,
         expression: this._config.expression,
         columnName: this._config.columnName,
         selectNumeric: this._selectNumeric,
@@ -78,15 +72,11 @@ RangeFacet.prototype.getJSON = function() {
         selectError: this._selectError
     };
     
-    if (this._config.mode == "min" || this._config.mode == "range") {
-        if (this._from !== null) {
-            o.from = this._from;
-        }
+    if (this._from !== null) {
+        o.from = this._from;
     }
-    if (this._config.mode == "max" || this._config.mode == "range") {
-        if (this._to !== null) {
-            o.to = this._to;
-        }
+    if (this._to !== null) {
+        o.to = this._to;
     }
     
     return o;
@@ -97,92 +87,59 @@ RangeFacet.prototype.hasSelection = function() {
         return true;
     }
     
-    switch (this._config.mode) {
-    case "min":
-        return this._from !== null && (!this._initializedUI || this._from > this._config.min);
-    case "max":
-        return this._to !== null && (!this._initializedUI || this._to < this._config.max);
-    default:
-        return (this._from !== null && (!this._initializedUI || this._from > this._config.min)) ||
-            (this._to !== null && (!this._initializedUI || this._to < this._config.max));
-    }
+    return (this._from !== null && (!this._initializedUI || this._from > this._config.min)) ||
+        (this._to !== null && (!this._initializedUI || this._to < this._config.max));
 };
 
 RangeFacet.prototype._initializeUI = function() {
     var self = this;
-    var container = this._div.empty().show();
+    this._div
+        .empty()
+        .show()
+        .html(
+            '<div class="facet-title" bind="headerDiv">' +
+                '<img src="images/close.png" class="facet-choice-link" title="Remove this facet" bind="removeButton" />' +
+                '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">reset</a>' +
+                '<span bind="facetTitle"></span>' +
+            '</div>' +
+            '<div class="facet-range-body">' +
+                '<div class="facet-range-message" bind="messageDiv">Loading...</div>' +
+                '<div class="facet-range-slider" bind="sliderWidgetDiv">' +
+                    '<div class="facet-range-histogram" bind="histogramDiv"></div>' +
+                '</div>' +
+                '<div class="facet-range-status" bind="statusDiv"></div>' +
+                '<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
+            '</div>'
+        );
+    this._elmts = DOM.bind(this._div);
     
-    var headerDiv = $('<div></div>').addClass("facet-title").appendTo(container);
-    $('<span></span>').text(this._config.name).appendTo(headerDiv);
-    
-    var resetButton = $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("reset").click(function() {
+    this._elmts.facetTitle.text(this._config.name);
+    this._elmts.resetButton.click(function() {
         self.reset();
         self._updateRest();
-    }).prependTo(headerDiv);
-    
-    var removeButton = $('<img>')
-        .attr("src", "images/close.png")
-        .attr("title", "Remove this facet")
-        .addClass("facet-choice-link")
-        .click(function() {
+    });
+    this._elmts.removeButton.click(function() {
             self._remove();
-        }).prependTo(headerDiv);
+        });
         
-    var bodyDiv = $('<div></div>').addClass("facet-range-body").appendTo(container);
+    this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
+    this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
     
-    this._messageDiv = $('<div>').text("Loading...").addClass("facet-range-message").appendTo(bodyDiv);
-    this._histogramDiv = $('<div>').addClass("facet-range-histogram").appendTo(bodyDiv);
-    this._sliderDiv = $('<div>').addClass("facet-range-slider").appendTo(bodyDiv);
-    this._statusDiv = $('<div>').addClass("facet-range-status").appendTo(bodyDiv);
-    this._otherChoicesDiv = $('<div>').addClass("facet-range-other-choices").appendTo(bodyDiv);
-    
-    this._histogram = new HistogramWidget(this._histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
-    
-    var onSlide = function(event, ui) {
-        switch (self._config.mode) {
-        case "min":
-            self._from = ui.value;
-            break;
-        case "max":
-            self._to = ui.value;
-            break;
-        default:
-            self._from = ui.values[0];
-            self._to = ui.values[1];
-        }
+    this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {
+        self._from = data.from;
+        self._to = data.to;
         self._setRangeIndicators();
-    };
-    var onStop = function() {
+    }).bind("stop", function(evt, data) {
+        self._from = data.from;
+        self._to = data.to;
         self._selectNumeric = true;
         self._updateRest();
-    };
-    var sliderConfig = {
-        min: this._config.min,
-        max: this._config.max,
-        stop: onStop,
-        slide: onSlide
-    };
-        
-    switch (this._config.mode) {
-    case "min":
-        sliderConfig.range = "max";
-        sliderConfig.value = this._config.min;
-        break;
-    case "max":
-        sliderConfig.range = "min";
-        sliderConfig.value = this._config.max;
-        break;
-    default:
-        sliderConfig.range = true;
-        sliderConfig.values = [ this._config.min, this._config.max ];
-    }
-    
-    this._sliderDiv.slider(sliderConfig);
+    });
 };
 
 RangeFacet.prototype._renderOtherChoices = function() {
     var self = this;
-    var container = this._otherChoicesDiv.empty();
+    var container = this._elmts.otherChoicesDiv.empty();
     
     if (this._baseNonNumericCount === 0 && this._baseBlankCount === 0 && this._baseErrorCount === 0) {
         return;
@@ -274,20 +231,7 @@ RangeFacet.prototype._renderOtherChoices = function() {
 };
 
 RangeFacet.prototype._setRangeIndicators = function() {
-    var text;
-    switch (this._config.mode) {
-    case "min":
-        text = "At least " + this._from;
-        break;
-    case "max":
-        text = "At most " + this._to;
-        break;
-    default:
-        text = this._from + " to " + this._to;
-    }
-    
-    this._statusDiv.text(text);
-    this._histogram.highlight(this._from, this._to);
+    this._elmts.statusDiv.html(this._from + " &mdash; " + this._to);
 };
 
 RangeFacet.prototype.updateState = function(data) {
@@ -340,31 +284,32 @@ RangeFacet.prototype.render = function() {
     }
     
     if (this._error) {
-        this._messageDiv.text(this._errorMessage).show();
-        this._sliderDiv.hide();
-        this._histogramDiv.hide();
-        this._statusDiv.hide();
-        this._otherChoicesDiv.hide();
+        this._elmts.messageDiv.text(this._errorMessage).show();
+        this._elmts.sliderWidgetDiv.hide();
+        this._elmts.histogramDiv.hide();
+        this._elmts.statusDiv.hide();
+        this._elmts.otherChoicesDiv.hide();
         return;
     }
     
-    this._messageDiv.hide();
-    this._sliderDiv.show();
-    this._histogramDiv.show();
-    this._statusDiv.show();
-    this._otherChoicesDiv.show();
-    
-    this._sliderDiv.slider("option", "min", this._config.min);
-    this._sliderDiv.slider("option", "max", this._config.max);
-    this._sliderDiv.slider("option", "step", this._config.step);
+    this._elmts.messageDiv.hide();
+    this._elmts.sliderWidgetDiv.show();
+    this._elmts.histogramDiv.show();
+    this._elmts.statusDiv.show();
+    this._elmts.otherChoicesDiv.show();
     
+    this._sliderWidget.update(
+        this._config.min, 
+        this._config.max, 
+        this._config.step, 
+        this._from,
+        this._to
+    );
     this._histogram.update(
         this._config.min, 
         this._config.max, 
         this._config.step, 
-        [ this._baseBins, this._bins ],
-        this._from,
-        this._to
+        [ this._baseBins, this._bins ]
     );
     
     this._setRangeIndicators();
diff --git a/src/main/webapp/scripts/widgets/histogram-widget.js b/src/main/webapp/scripts/widgets/histogram-widget.js
index 5c08026e8..2713330a1 100644
--- a/src/main/webapp/scripts/widgets/histogram-widget.js
+++ b/src/main/webapp/scripts/widgets/histogram-widget.js
@@ -4,21 +4,18 @@ function HistogramWidget(elmt, options) {
     
     this._range = null;
     this._binMatrix = null;
-    this._highlight = null;
     
     this._initializeUI();
 }
 
-HistogramWidget.prototype.highlight = function(from, to) {
-    this._highlight = { from: from, to: to };
-    this._update();
-};
-
-HistogramWidget.prototype.update = function(min, max, step, binMatrix, from, to) {
-    if (typeof min == "undefined" || typeof binMatrix == "undefined" || binMatrix.length === 0 || binMatrix[0].length === 0) {
+HistogramWidget.prototype.update = function(min, max, step, binMatrix) {
+    if (typeof min == "undefined" || 
+        typeof binMatrix == "undefined" || 
+        binMatrix.length === 0 || 
+        binMatrix[0].length === 0) {
+            
         this._range = null;
         this._binMatrix = null;
-        this._highlight = null;
         
         this._elmt.hide();
     } else {
@@ -33,21 +30,12 @@ HistogramWidget.prototype.update = function(min, max, step, binMatrix, from, to)
             }
         }
         
-        if (typeof from != "undefined" && typeof to != "undefined") {
-            this._highlight = { from: from, to: to };
-        }
-        
         this._update();
     }
 };
 
 HistogramWidget.prototype._update = function() {
     if (this._binMatrix !== null) {
-        if (this._highlight !== null) {
-            this._highlight.from = Math.max(this._highlight.from, this._range.min);
-            this._highlight.to = Math.min(this._highlight.to, this._range.max);
-        }
-        
         this._elmt.show();
         this._resize();
         this._render();
@@ -67,8 +55,11 @@ HistogramWidget.prototype._initializeUI = function() {
 };
 
 HistogramWidget.prototype._resize = function() {
-    this._elmts.canvas.attr("height", "height" in this._options ? this._options.height : 50);
+    var height = "height" in this._options ? this._options.height : 50;
+    
+    this._elmts.canvas.attr("height", height);
     this._elmts.canvas.attr("width", this._elmts.canvas.width());
+    this._elmt.height(height);
 };
 
 HistogramWidget.prototype._render = function() {
@@ -132,29 +123,5 @@ HistogramWidget.prototype._render = function() {
         );
     }
     
-    /*
-     *  Draw highlight
-     */
-    if (this._highlight !== null) {
-        ctx.fillStyle = "rgba(192,192,192, 0.5)";
-        ctx.globalCompositeOperation = "source-over";
-        if (this._highlight.from > this._range.min) {
-            ctx.fillRect(
-                0,
-                0,
-                (this._highlight.from - this._range.min) * stepScale,
-                canvas.height
-            );
-        }
-        if (this._highlight.to < this._range.max) {
-            ctx.fillRect(
-                (this._highlight.to - this._range.min) * stepScale,
-                0,
-                canvas.width - (this._highlight.to - this._range.min) * stepScale,
-                canvas.height
-            );
-        }
-    }
-        
     ctx.restore();
 };
diff --git a/src/main/webapp/scripts/widgets/slider-widget.js b/src/main/webapp/scripts/widgets/slider-widget.js
new file mode 100644
index 000000000..5717d0f74
--- /dev/null
+++ b/src/main/webapp/scripts/widgets/slider-widget.js
@@ -0,0 +1,180 @@
+function SliderWidget(elmt, options) {
+    this._elmt = elmt;
+    this._options = options || {};
+    
+    this._range = {
+        min: 0,
+        max: 1,
+        step: 1,
+        from: 0,
+        to: 0
+    };
+    this._drag = null;
+    
+    this._initializeUI();
+    this._update();
+}
+
+SliderWidget.prototype.update = function(min, max, step, from, to) {
+    if (step <= 0) {
+        step = 1;
+    }
+    max = Math.max(max, min + step);
+    from = Math.max(min, from);
+    to = Math.min(max, to);
+    
+    this._range = {
+        min: min,
+        max: max,
+        step: step,
+        from: from,
+        to: to
+    };
+    this._update();
+}
+
+SliderWidget.prototype._initializeUI = function() {
+    this._elmt.addClass("slider-widget");
+    
+    this._leftTintedRect = $("<div>").addClass("slider-widget-tint left").appendTo(this._elmt);
+    this._rightTintedRect = $("<div>").addClass("slider-widget-tint right").appendTo(this._elmt);
+    this._highlightRect = $("<div>").addClass("slider-widget-highlight slider-widget-draggable").attr("part", "highlight").appendTo(this._elmt);
+    this._leftBracket = $("<div>").addClass("slider-widget-bracket slider-widget-draggable left").attr("part", "left").appendTo(this._elmt);
+    this._rightBracket = $("<div>").addClass("slider-widget-bracket slider-widget-draggable right").attr("part", "right").appendTo(this._elmt);
+    
+    var self = this;
+    this._elmt.find(".slider-widget-draggable")
+        .mousedown(function(evt) {
+            return self._onMouseDown(evt, this.getAttribute("part"));
+        });
+    
+    this._highlightRect.dblclick(function(evt) {
+        if (self._range.from > self._range.min || self._range.to < self._range.max) {
+            self._range.from = self._range.min;
+            self._range.to = self._range.max;
+            self._update();
+            self._trigger("stop");
+        }
+    });
+        
+    this._elmt
+        .mousemove(function(evt) {
+            return self._onMouseMove(evt);
+        })
+        .mouseup(function(evt) {
+            return self._onMouseUp(evt);
+        });
+};
+
+SliderWidget.prototype._onMouseDown = function(evt, part) {
+    if (this._drag) {
+        return;
+    }
+    
+    this._drag = {
+        sureDrag: false
+    };
+    if ("highlight" == part) {
+        this._drag.elmt = this._highlightRect;
+        this._drag.value = this._range.from;
+    } else if ("left" == part) {
+        this._drag.elmt = this._leftBracket;
+    } else if ("right" == part) {
+        this._drag.elmt = this._rightBracket;
+    }
+    this._drag.what = part;
+    this._drag.from = this._range.from;
+    this._drag.to = this._range.to;
+    this._drag.down = {
+        x: evt.pageX,
+        y: evt.pageY
+    };
+};
+
+SliderWidget.prototype._onMouseUp = function(evt) {
+    if (!(this._drag)) {
+        return;
+    }
+    
+    if (this._drag.sureDrag) {
+        this._update();
+        this._trigger("stop");
+    }
+    this._drag = null;
+};
+
+SliderWidget.prototype._trigger = function(eventName) {
+    this._elmt.trigger(eventName, [{ from: this._range.from, to: this._range.to }]);
+};
+
+SliderWidget.prototype._onMouseMove = function(evt) {
+    if (!(this._drag)) {
+        return;
+    }
+    
+    var drag = this._drag;
+    var range = this._range;
+    
+    var offset = this._elmt.offset();
+    var xDiff = evt.pageX - drag.down.x;
+    var yDiff = evt.pageX - drag.down.y;
+    
+    if (Math.abs(xDiff) >= 2) {
+        drag.sureDrag = true;
+    }
+    
+    var pixelWidth = this._elmt.width();
+    var scale = pixelWidth / (range.max - range.min);
+    var vDiff = xDiff / scale;
+    
+    var adjustFrom = function() {
+        range.from = drag.from + Math.floor(vDiff / range.step) * range.step;
+        range.from = Math.max(Math.min(range.from, range.max), range.min);
+    };
+    var adjustTo = function() {
+        range.to = drag.to + Math.floor(vDiff / range.step) * range.step;
+        range.to = Math.max(Math.min(range.to, range.max), range.min);
+    };
+    
+    if (drag.what == "left") {
+        adjustFrom();
+        range.to = Math.min(Math.max(range.to, range.from + range.step), range.max);
+    } else if (drag.what == "right") {
+        adjustTo();
+        range.from = Math.max(Math.min(range.from, range.to - range.step), range.min);
+    } else {
+        adjustFrom();
+        adjustTo();
+    }
+    
+    this._update();
+    this._trigger("slide");
+    
+    evt.preventDefault();
+    return false;
+};
+
+SliderWidget.prototype._update = function() {
+    var range = this._range;
+    
+    var pixelWidth = this._elmt.width();
+    var scale = pixelWidth / (range.max - range.min);
+    var valueToPixel = function(x) {
+        return (x - range.min) * scale;
+    };
+    
+    var fromPixel = Math.floor(valueToPixel(range.from));
+    var toPixel = Math.floor(valueToPixel(range.to));
+    
+    if (range.from == range.min && range.to == range.max) {
+        this._leftTintedRect.hide();
+        this._rightTintedRect.hide();
+    } else {
+        this._leftTintedRect.show().width(fromPixel);
+        this._rightTintedRect.show().width(pixelWidth - toPixel);
+    }
+    
+    this._highlightRect.css("left", (fromPixel - 1) + "px").width(toPixel - fromPixel);
+    this._leftBracket.css("left", fromPixel + "px");
+    this._rightBracket.css("left", toPixel + "px");
+};
diff --git a/src/main/webapp/styles/dialogs/clustering-dialog.css b/src/main/webapp/styles/dialogs/clustering-dialog.css
index a9230efd6..87c8cff95 100644
--- a/src/main/webapp/styles/dialogs/clustering-dialog.css
+++ b/src/main/webapp/styles/dialogs/clustering-dialog.css
@@ -64,11 +64,10 @@ table.clustering-dialog-entry-table a:hover {
     font-weight: bold;
 }
 .clustering-dialog-facet-histogram {
-    margin: 10px;
     overflow: hidden;
 }
 .clustering-dialog-facet-slider {
-    margin: 5px 10px;
+    margin: 5px;
 }
 .clustering-dialog-facet-selection {
     text-align: center;
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index 29e2a1457..0dd6585a2 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/src/main/webapp/styles/project/browsing.css
@@ -143,21 +143,15 @@ img.facet-choice-link {
     color: #f88;
 }
 .facet-range-histogram {
-    margin: 10px 0px;
     overflow: hidden;
 }
-.facet-range-slider.ui-corner-all {
-    border-bottom-left-radius: 0px 0px;
-    border-bottom-right-radius: 0px 0px;
-    border-top-left-radius: 0px 0px;
-    border-top-right-radius: 0px 0px;
+.facet-range-slider {
+    margin: 0px;
 }
 
-
 .facet-range-status {
-    margin: 10px 0;
+    margin: 5px 0;
     text-align: center;
-    color: #aaa;
 }
 
 .facet-text-body {
diff --git a/src/main/webapp/styles/widgets/slider-widget.css b/src/main/webapp/styles/widgets/slider-widget.css
new file mode 100644
index 000000000..c0a03ebeb
--- /dev/null
+++ b/src/main/webapp/styles/widgets/slider-widget.css
@@ -0,0 +1,45 @@
+.slider-widget {
+    position: relative;
+    overflow: visible;
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
+.slider-widget-tint {
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    background: black;
+    opacity: 0.4;
+    display: none;
+}
+.slider-widget-tint.left {
+    left: 0px;
+}
+.slider-widget-tint.right {
+    right: 0px;
+}
+.slider-widget-highlight {
+    position: absolute;
+    padding: 1px 0px;
+    border: 1px solid #faa;
+    top: -2px;
+    height: 100%;
+    cursor: move;
+}
+.slider-widget-bracket {
+    position: absolute;
+    width: 12px;
+    top: 0px;
+    height: 100%;
+}
+.slider-widget-bracket.left {
+    background: url(../../images/slider-left-bracket.png) no-repeat center right;
+    margin-left: -14px;
+    cursor: e-resize;
+}
+.slider-widget-bracket.right {
+    background: url(../../images/slider-right-bracket.png) no-repeat center left;
+    margin-left: 2px;
+    cursor: w-resize;
+}