RangeFilter component

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}/react/"
+        }
+    ]
+}

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+-   [#225](https://github.com/equinor/webviz-core-components/pull/225) - Added `RangeFilter` component which allows for a quick selection of integer ranges.
 -   [#207](https://github.com/equinor/webviz-core-components/pull/207) - Added `storybook` and stories for each component. Added publishment of `storybook` to GitHub workflow. Added `storybook` link to README.
 -   [#219](https://github.com/equinor/webviz-core-components/pull/219) - Implemented components required by the new Webviz Layout Framework (WLF)
 

react/src/demo/App.tsx

@@ -9,7 +9,12 @@
 import { Button } from "@material-ui/core";
 import React from "react";
 
-import { WebvizPluginPlaceholder, SmartNodeSelector, Dialog } from "../lib";
+import {
+    WebvizPluginPlaceholder,
+    SmartNodeSelector,
+    Dialog,
+    RangeFilter,
+} from "../lib";
 
 const steps = [
     {
@@ -40,6 +45,8 @@ const App: React.FC = () => {
             selectedTags: [],
         });
 
+    const [selectedValues, setSelectedValues] = React.useState<number[]>([]);
+
     const [currentPage, setCurrentPage] = React.useState<MenuProps>({
         url: "",
     });
@@ -48,6 +55,14 @@ const App: React.FC = () => {
 
     return (
         <div>
+            <RangeFilter
+                minValue={0}
+                maxValue={99}
+                step={1}
+                showTicks={true}
+                setProps={({ values }) => setSelectedValues(values)}
+            />
+            Selected Values are: {selectedValues.join(", ")}
             {currentPage.url.split("#")[1] === "dialog" && (
                 <>
                     <h1>Dialog</h1>

react/src/lib/components/RangeFilter/components/Thumb/index.ts

@@ -0,0 +1 @@
+export { Thumb } from "./thumb";

react/src/lib/components/RangeFilter/components/Thumb/thumb.css

@@ -0,0 +1,82 @@
+.WebvizRangeFilter__Thumb {
+    position: absolute;
+    display: flex;
+    z-index: 10;
+    height: 100%;
+}
+
+.WebvizRangeFilter__Thumb__Handle {
+    position: relative;
+    background-color: black;
+    width: 1px;
+    height: 100%;
+    cursor: ew-resize;
+    -webkit-box-shadow: 0px 0px 7px -3px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0px 0px 7px -3px rgba(0, 0, 0, 0.75);
+    box-shadow: 0px 0px 7px -3px rgba(0, 0, 0, 0.75);
+}
+
+.WebvizRangeFilter__Thumb__Handle:hover,
+.WebvizRangeFilter__Thumb__Handle--active {
+    transform: scaleX(8) scaleY(1.2);
+    border-radius: 4px;
+    outline: 1px #35a0ae9b solid;
+    transition: outline 0.1s ease-in-out;
+}
+
+.WebvizRangeFilter__Thumb--Tooltip {
+    position: absolute;
+    top: -24px;
+    width: 100%;
+    color: rgba(0, 0, 0, 0.75);
+    text-align: center;
+}
+
+.WebvizRangeFilter__Thumb__Bar {
+    background-color: #246e78;
+    height: 100%;
+    -webkit-box-shadow: inset 0px -2px 5px -3px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: inset 0px -2px 5px -3px rgba(0, 0, 0, 0.75);
+    box-shadow: inset 0px -2px 5px -3px rgba(0, 0, 0, 0.75);
+    border-radius: 4px;
+    cursor: ew-resize;
+    transition: outline 0.1s ease-in-out;
+}
+
+.WebvizRangeFilter__Thumb__Bar:hover {
+    background-color: #35a0ae;
+    transform: scaleY(1.2);
+    outline: 5px #35a0ae9b solid;
+    transition: outline 0.1s ease-in-out;
+}
+
+.WebvizRangeFilter__Thumb__Tooltip {
+    position: absolute;
+    padding: 4px;
+    width: 40px;
+    text-align: center;
+    background-color: white;
+    border-radius: 4px;
+    top: 26px;
+}
+
+.WebvizRangeFilter__Thumb__Tooltip--left {
+    left: 0px;
+    margin-left: -24px;
+    display: block;
+}
+
+.WebvizRangeFilter__Thumb__Tooltip--right {
+    right: 0px;
+    margin-right: -24px;
+    display: block;
+}
+
+@keyframes width {
+    0% {
+        transform: scaleX(0);
+    }
+    100% {
+        transform: scaleX(100%);
+    }
+}