Redesign and improve slider widgets

bokehjs/package.json

@@ -50,7 +50,6 @@
     "flatbush": "^4.2.0",
     "flatpickr": "^4.6.13",
     "mathjax-full": "^3.2.2",
-    "nouislider": "^15.7.1",
     "proj4": "^2.9.2",
     "regl": "^2.1.0",
     "sprintf-js": "^1.1.3",

bokehjs/src/less/widgets/sliders.less

@@ -1,7 +1,68 @@
+:host {
+  --track-size: 0.5em;
+  --handle-size: 1.0em;
+}
+
 .bk-slider-title {
   white-space: nowrap;
 }
 
 .bk-slider-value {
   font-weight: 600;
 }
+
+.bk-slider {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: var(--handle-size);
+}
+
+.bk-track {
+  align-self: center;
+  position: relative;
+  width: 100%;
+  height: var(--track-size);
+  border-radius: 4px;
+  border: 1px solid #c0c0c0;
+  background-color: #e5e5e5;
+}
+
+.bk-span {
+  --value: 0; // [0, 1]
+  position: relative;
+  left: 0;
+  top: 0;
+  width: calc(var(--value)*100%);
+  height: 100%;
+  border-top-left-radius: var(--track-size);
+  border-bottom-left-radius: var(--track-size);
+  background-color: #c2d5f7;
+}
+
+.bk-handle {
+  --value: 0; // [0, 1]
+  position: absolute;
+  left: calc(var(--value)*100%);
+  top: 50%;
+  width: var(--handle-size);
+  height: var(--handle-size);
+  border-radius: 50%;
+  background-color: #3b80f0;
+  transform: translate(-50%, -50%);
+  cursor: ew-resize;
+}
+
+:host(.bk-stealth) {
+  --handle-size: var(--track-size);
+
+  .bk-handle {
+    opacity: 0;
+  }
+}
+
+:host(.bk-vertical) {
+  .bk-handle {
+    cursor: ns-resize;
+  }
+}

bokehjs/src/lib/core/dom.ts

@@ -325,9 +325,15 @@ export function content_size(el: HTMLElement): Size {
   return {width, height}
 }
 
-export function bounding_box(el: Element): BBox {
+export function bounding_box(el: Element, relative_to?: Element): BBox {
   const {x, y, width, height} = el.getBoundingClientRect()
-  return new BBox({x, y, width, height})
+  const bbox = new BBox({x, y, width, height})
+  if (relative_to != null) {
+    const {x, y} = relative_to.getBoundingClientRect()
+    return bbox.translate(-x, -y)
+  } else {
+    return bbox
+  }
 }
 
 export function box_size(el: Element): Size {

bokehjs/src/lib/core/util/array.ts

@@ -125,6 +125,10 @@ export function linspace(start: number, stop: number, num: number = 100): number
   return array
 }
 
+export function logspace(start: number, stop: number, num: number = 100, base: number = 10): number[] {
+  return linspace(start, stop, num).map((v) => base**v)
+}
+
 export function transpose<T>(array: T[][]): T[][] {
   const rows = array.length
   const cols = array[0].length

bokehjs/src/lib/core/util/bbox.ts

@@ -392,8 +392,8 @@ export class BBox implements Rect, Equatable {
     })
   }
 
-  relativize(x: number, y: number): [number, number] {
-    return [x - this.x, y - this.y]
+  relativize({x, y}: XY): XY {
+    return {x: x - this.x, y: y - this.y}
   }
 
   contains(x: number, y: number): boolean {

bokehjs/src/lib/models/layouts/layout_dom.ts

@@ -94,8 +94,6 @@ export abstract class LayoutDOMView extends PaneView {
     })
 
     this.on_change([
-      p.css_classes,
-      p.stylesheets,
       p.width, p.height,
       p.min_width, p.min_height,
       p.max_width, p.max_height,

bokehjs/src/lib/models/ui/slider.ts

@@ -0,0 +1,39 @@
+import {UIElement, UIElementView} from "./ui_element"
+import type * as p from "core/properties"
+
+export class SliderView extends UIElementView {
+  declare model: Slider
+
+  override connect_signals(): void {
+    super.connect_signals()
+  }
+
+  override render(): void {
+    super.render()
+  }
+}
+
+export namespace Slider {
+  export type Attrs = p.AttrsOf<Props>
+
+  export type Props = UIElement.Props & {
+  }
+}
+
+export interface Slider extends Slider.Attrs {}
+
+export class Slider extends UIElement {
+  declare properties: Slider.Props
+  declare __view_type__: SliderView
+
+  constructor(attrs?: Partial<Slider.Attrs>) {
+    super(attrs)
+  }
+
+  static {
+    this.prototype.default_view = SliderView
+
+    this.define<Slider.Props>(({}) => ({
+    }))
+  }
+}