@startupjs-ui/range-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/range-input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **docs:** support static web bundling (each route as a separate html page) ([5e4738c](https://github.com/startupjs/startupjs-ui/commit/5e4738c50157ae37e14d8dc36cb43d6a45a008ad))
+* **range-input:** refactor RangeInput component ([e1c4a74](https://github.com/startupjs/startupjs-ui/commit/e1c4a742fcc0e416b7129364b40ba3f2aef59971))

package/Label/index.cssx.styl

@@ -0,0 +1,31 @@
+.root
+  position relative
+
+.label
+  position absolute
+  top 2px
+  width 12u
+  align-items center
+
+// todo: implement common tooltip style
+.text
+  background-color var(--Range-labelBg)
+  padding 0.5u 1u
+  font-style normal
+  font(caption)
+  color var(--Range-labelText)
+  shadow(3)
+  radius()
+
+.arrow
+  width 0
+  height 0
+  background-color transparent
+  border-style solid
+  border-left-width 4px
+  border-right-width 4px
+  border-bottom-width 4px
+  border-left-color transparent
+  border-right-color transparent
+  border-bottom-color var(--Range-labelBg)
+  transform rotate(180deg)

package/Label/index.tsx

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react'
+import { type LabelProps as MultiSliderLabelProps } from '@ptomasroos/react-native-multi-slider'
+import { pug } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import STYLES from './index.cssx.styl'
+
+function Label ({
+  oneMarkerValue,
+  twoMarkerValue,
+  oneMarkerLeftPosition,
+  twoMarkerLeftPosition,
+  oneMarkerPressed,
+  twoMarkerPressed
+}: MultiSliderLabelProps): ReactNode {
+  // Number.isFinite - This condition has been taken from original vendor component.
+  // Be aware when you change this.
+  const showOne = oneMarkerPressed && Number.isFinite(oneMarkerLeftPosition) &&
+    Number.isFinite(oneMarkerValue)
+  const showTwo = twoMarkerPressed && Number.isFinite(twoMarkerLeftPosition) &&
+    Number.isFinite(twoMarkerValue)
+
+  return pug`
+    Div.root
+      if showOne
+        = renderLabel(oneMarkerLeftPosition, oneMarkerValue)
+      if showTwo
+        = renderLabel(twoMarkerLeftPosition, twoMarkerValue)
+  `
+}
+
+function renderLabel (position: number, value: string | number): ReactNode {
+  return pug`
+    Div.label(style={ left: position - STYLES.label.width / 2 })
+      // todo: implement common tooltip style
+      Span.text= value
+      Span.arrow
+  `
+}
+
+export default Label

package/README.mdx

@@ -0,0 +1,164 @@
+import { useState } from 'react'
+import RangeInput, { _PropsJsonSchema as RangeInputPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# RangeInput
+
+RangeInput lets user make selections from a range of values.
+
+```jsx
+import { RangeInput } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [value, setValue] = useState(50)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={100}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+## Two markers
+
+By default component has one marker. To enable two makers pass `range=true`.
+
+```jsx example
+const [value, setValue] = useState([20, 60])
+
+return (
+  <RangeInput
+    min={0}
+    max={100}
+    range
+    value={value}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+## Hide marker label
+
+Pass `showLabel=false` to hide marker label.
+
+```jsx example
+const [value, setValue] = useState(40)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={100}
+    showLabel={false}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+## Step
+
+Step with which the marker can step through values. It cannot be negative. We recommend `max - min` to be evenly divisible by the step.
+
+```jsx example
+const [value, setValue] = useState(30)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={100}
+    step={10}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+## Show labels and markers for step
+
+Pass `showSteps=true` to display labels and markers for step.
+
+```jsx example
+const [value, setValue] = useState(4)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={5}
+    showSteps
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+When you pass `showSteps=true` to hide the labels or markers you need to pass `showStepLabels=false` or `showStepMarkers=false`.
+
+**Hide labels**
+
+```jsx example
+const [value, setValue] = useState(4)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={5}
+    showSteps
+    showStepLabels={false}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+**Hide markers**
+
+```jsx example
+const [value, setValue] = useState(4)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={5}
+    showLabel={false}
+    showSteps
+    showStepMarkers={false}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+## Width
+
+Use `width` property to specify custom width of input.
+
+```jsx example
+const [value, setValue] = useState(30)
+
+return (
+  <RangeInput
+    value={value}
+    min={0}
+    max={100}
+    width={400}
+    onChange={(val) => setValue(val)}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={RangeInput}
+  propsJsonSchema={RangeInputPropsJsonSchema}
+  props={{
+    value: 50,
+    onChange: value => alert('New value is ' + JSON.stringify(value))
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,34 @@
+$this = merge({
+  trackColor: var(--color-bg-main-subtle),
+  selectedColor: var(--color-bg-primary),
+  stepMarker: var(--color-text-on-color)
+}, $UI.RangeInput, true)
+
+.root
+  &:part(container)
+    height 10u
+
+  &:part(track)
+    height 1u
+    background-color $this.trackColor
+    border-radius 4px
+
+  &:part(selected)
+    background-color $this.selectedColor
+
+  &:part(marker)
+    top 4px
+    width 16px
+    height @width
+    border-radius 10px
+    shadow(1)
+
+  &:part(stepLabel)
+    font-style normal
+    font(caption)
+    color var(--color-text-main)
+
+  &:part(stepMarker)
+    border-radius 0
+    width 2px
+    background-color $this.stepMarker

package/index.d.ts

@@ -0,0 +1,52 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type MultiSliderProps } from '@ptomasroos/react-native-multi-slider';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<RangeInputProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface RangeInputProps {
+    /** Custom marker label component @default Label */
+    customLabel?: MultiSliderProps['customLabel'];
+    /** Show pressed marker label @default true */
+    showLabel?: boolean;
+    /** Minimum value @default 0 */
+    min?: number;
+    /** Maximum value @default 100 */
+    max?: number;
+    /** Enable two markers mode @default false */
+    range?: boolean;
+    /** Show steps on the track @default false */
+    showSteps?: boolean;
+    /** Show step labels when showSteps is enabled @default true */
+    showStepLabels?: boolean;
+    /** Show step markers when showSteps is enabled @default true */
+    showStepMarkers?: boolean;
+    /** Step size @default 1 */
+    step?: number;
+    /** Current value (number for single marker, array for two markers) */
+    value?: number | number[] | null;
+    /** Slider width in pixels @default 280 */
+    width?: number;
+    /** Style overrides for the container part */
+    containerStyle?: any;
+    /** Style overrides for the selected track part */
+    selectedStyle?: any;
+    /** Style overrides for the step label part */
+    stepLabelStyle?: any;
+    /** Style overrides for the step marker part */
+    stepMarkerStyle?: any;
+    /** Style overrides for the step part */
+    stepStyle?: any;
+    /** Style overrides for the track part */
+    trackStyle?: any;
+    /** Style overrides for the marker part */
+    markerStyle?: any;
+    /** Change handler */
+    onChange?: (value: number | number[]) => void | Promise<void>;
+    /** Handler triggered when sliding starts */
+    onChangeStart?: MultiSliderProps['onValuesChangeStart'];
+    /** Handler triggered when sliding ends */
+    onChangeFinish?: MultiSliderProps['onValuesChangeFinish'];
+}

package/index.tsx

@@ -0,0 +1,117 @@
+import { useMemo, type ReactNode } from 'react'
+import MultiSlider, { type MultiSliderProps } from '@ptomasroos/react-native-multi-slider'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Label from './Label'
+import './index.cssx.styl'
+
+export default observer(themed('RangeInput', RangeInput))
+
+export const _PropsJsonSchema = {/* RangeInputProps */}
+
+export interface RangeInputProps {
+  /** Custom marker label component @default Label */
+  customLabel?: MultiSliderProps['customLabel']
+  /** Show pressed marker label @default true */
+  showLabel?: boolean
+  /** Minimum value @default 0 */
+  min?: number
+  /** Maximum value @default 100 */
+  max?: number
+  /** Enable two markers mode @default false */
+  range?: boolean
+  /** Show steps on the track @default false */
+  showSteps?: boolean
+  /** Show step labels when showSteps is enabled @default true */
+  showStepLabels?: boolean
+  /** Show step markers when showSteps is enabled @default true */
+  showStepMarkers?: boolean
+  /** Step size @default 1 */
+  step?: number
+  /** Current value (number for single marker, array for two markers) */
+  value?: number | number[] | null
+  /** Slider width in pixels @default 280 */
+  width?: number
+  /** Style overrides for the container part */
+  containerStyle?: any
+  /** Style overrides for the selected track part */
+  selectedStyle?: any
+  /** Style overrides for the step label part */
+  stepLabelStyle?: any
+  /** Style overrides for the step marker part */
+  stepMarkerStyle?: any
+  /** Style overrides for the step part */
+  stepStyle?: any
+  /** Style overrides for the track part */
+  trackStyle?: any
+  /** Style overrides for the marker part */
+  markerStyle?: any
+  /** Change handler */
+  onChange?: (value: number | number[]) => void | Promise<void>
+  /** Handler triggered when sliding starts */
+  onChangeStart?: MultiSliderProps['onValuesChangeStart']
+  /** Handler triggered when sliding ends */
+  onChangeFinish?: MultiSliderProps['onValuesChangeFinish']
+}
+
+function RangeInput ({
+  customLabel = Label,
+  showLabel = true,
+  min = 0,
+  max = 100,
+  range = false,
+  showSteps = false,
+  showStepLabels = true,
+  showStepMarkers = true,
+  step = 1,
+  value,
+  width = 280,
+  onChange,
+  onChangeFinish,
+  onChangeStart,
+  ...props
+}: RangeInputProps): ReactNode {
+  useMemo(() => {
+    if (typeof value === 'undefined' || value === null) {
+      // to initialize a model with default value if it is missing
+      // eslint-disable-next-line @typescript-eslint/no-throw-literal
+      throw new Promise<void>(resolve => {
+        void (async () => {
+          // TODO: maybe throw an Error instead of console.warn?
+          if (!onChange) console.warn('[@startupjs-ui/range-input] `onChange` is required when `value` is undefined')
+          await onChange?.(range ? [min, max] : min)
+          resolve()
+        })()
+      })
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // vendor component requires an array in any case
+  const values = Array.isArray(value) ? value : [value as any]
+
+  function onValuesChange (nextValues: number[]) {
+    onChange && onChange(range ? nextValues : nextValues[0])
+  }
+
+  return pug`
+    MultiSlider.root(
+      ...props
+      part='root'
+      customLabel=customLabel
+      enableLabel=showLabel
+      enabledTwo=range
+      min=min
+      max=max
+      showSteps=showSteps
+      showStepLabels=showStepLabels
+      showStepMarkers=showStepMarkers
+      sliderLength=width
+      snapped
+      step=step
+      values=values
+      onValuesChange=onValuesChange
+      onValuesChangeFinish=onChangeFinish
+      onValuesChangeStart=onChangeStart
+    )
+  `
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/range-input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@ptomasroos/react-native-multi-slider": "github:ptomasroos/react-native-multi-slider#368a0e8a67a595a84f411ea394b471a43ad8e7a4",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}