FM BetterForms Docs
BF Editorfmbetterforms.com
master
master
  • Introduction
  • 🏆Features
  • Getting Started
    • Welcome to FM BetterForms!
    • System Overview
    • Quick Tour of the BetterForms IDE
    • 1. Setting Up Your Foundation
      • 1.1 Configure FileMaker Server
      • 1.2 Install BetterForms Helper File
      • 1.3 Add Your Server to BetterForms (IDE)
    • 2. Building Your First Application
      • 2.1 Create an App (Site) in the IDE
      • 2.2 Create Your First Page (Intro to Page Builder)
      • 2.3 Understanding & Managing Environments (IDE)
      • 2.4 Adding Elements to Your Page
      • 2.5 Understanding Validation
      • 2.6 Adding Actions to Your Page
      • 2.7 Creating Your First List View
      • 2.8 Understanding Page Data Flow
      • 2.9 Creating Your First Hook
      • 2.10 Working with Data Tables (Coming Soon)
    • 3. Understanding Core BetterForms Concepts
      • 3.1 Introduction to Hooks (and where to find them in the IDE)
      • 3.2 Running Your First Hook (Practical Example)
      • 3.3 Introduction to Actions & Action Scripts (IDE Context)
      • 3.4 Understanding the Data Model (and Page Data Model UI)
    • 4. Common Customizations & Expanding Your App
      • 4.1 Adding & Configuring Buttons (Page Builder)
      • 4.2 Implementing Page Navigation (Actions & Site Navigation UI)
      • 4.3 Displaying Data in Tables (Page Builder & Element Config)
      • 4.4 Basic App Styling (Site Styling UI)
    • 5. Mastering the BetterForms Environment & Advancing Your Skills
      • 5.1 Understanding & Managing Environments (In-Depth)
      • 5.2 Deep Dive: Page Configuration & Settings
        • Navigating the Page Builder Interface
        • Working with Page-Level Action Scripts
        • Configuring the Page Data Model
        • Page Integration Settings Explained
        • Managing Page Info & Other Settings
      • 5.3 Working with Global Scripts
      • 5.4 Managing App (Site) Settings & Navigation
      • 5.5 Exploring Further: What to Learn Next
    • Support & Resources
      • Getting Help
      • Learning JSON
  • Reference
    • Site Settings
      • Navigation
      • App Model
      • DOM Header Insertions
      • Global Named Actions
      • Site Structure
      • Slots / Code Injection
    • Developer Mode
    • Page Settings
      • Data Model
      • Card / Window Modals
      • Validation
        • Custom Validators
      • Misc Page Settings
    • Page Elements
      • Copy of Site Structure
      • BetterForms Elements
        • Checkbox
        • Checklist
        • Cleave.js Input Masking
        • DateTime Picker
        • Google Address Autocomplete
        • Image Display Element
        • Input
        • Masked Input
        • Range Slider (noUiSlider)
        • Radios
        • Select
        • Advanced Select (selectEx)
        • TextArea
      • Common
        • Input
        • Button
        • Data Table
        • HTML
      • Grouping Elements
        • Tabs
        • Panel
        • accordion
        • accordion2
        • listrows
      • Uploading Files
        • dropzone
        • dropzone to S3
        • uploadCare
        • 🏗️Uppy File Upload Widget Integration with AWS S3
      • Misc Elements
        • Plain Text / Code Editor
        • signature
        • fullCalendar
        • rangeSlider
      • Payment Gateways
        • Authorize.net
        • PayPal
        • Stripe
      • Adding Custom Page Elements
    • Actions Processor
      • Named Actions (Action Scripts)
      • Actions
        • runUtilityHook
        • path
        • debounce
        • throttle
        • showAlert
        • showModal / hideModal
        • function
        • clipboard
        • cookie
        • setFocus
        • scrollTo
        • wait
        • emit
        • validate
        • channelJoinAnon
        • channelLeaveAnon
        • messageSend
        • messageSendAnonChannel
        • consoleError
        • showStripeCheckout
      • Authentication Actions
    • Script Hooks
      • Globals Variables
        • $$BF_Model
        • $$BF_App
        • $$BF_State
      • Keeping Keys Private
      • Reducing Payload Size
      • API Callback Endpoint
      • Common Hooks
      • Scoped Hooks
    • Users & Authentication
      • Managing User Accounts
      • Custom Login Pages
      • OAuth
    • Advanced Configuration
      • Custom Domains
    • BF Utility Functions
      • Example Usage
        • BF.i18n()
    • BF Error Codes
    • Messaging
      • Adding users to channels
      • Removing users from channels
      • Sending messages
      • Get connected users
      • Get active channels
    • Practices for File Downloads
    • BF Streaming Proxy
    • Updating the Helper File
    • Connection Trouble Shooting Guide
    • Software Testing Overview
    • JavaScript Libraries
    • FM BetterForms - Quality Assurance
    • Rollbacks and Version Control
    • BF Server Proxy
    • Setting up Auth0
    • Create an S3 Bucket on AWS
    • ApexCharts - Getting started
    • BF Enterprise Documentation
    • BetterForms Error Pages API
    • BF Streaming API
    • LLM Query API
    • Creating a PWA
  • Usage Tips
    • Troubleshooting
      • Debugging
      • Frozen Actions Queue
      • Vue Variables
    • JavaScript Tips
      • Calling Named Actions from HTML Vue Events
      • Calculations
    • Hacking a Webpage
    • System Overview
    • Forms Processor
      • Form Types
      • HTML & VueJS
      • Styling and Design
    • Customizing and Styling
      • Custom CSS
      • Custom Components
        • Components Editor
        • Component Best Practices
      • Page Pre-loaders
      • Favicon
    • Design Patterns and Best Practices
      • Working with environments
      • Handling Data
      • Saving Data
      • Data Optimization
      • Business Logic
      • UI / UX
      • Debugging
      • Script Engine Optimization
    • Getting Started
    • Installation
  • Security
    • Authentication
    • Security White Paper
    • Firewalls
    • Technology Stack
  • Compatibility
Powered by GitBook
On this page
  • Common Configuration Properties
  • noUiSliderOptions common settings:
  • Example Schema Snippet (Single Value Slider)
  • Example Schema Snippet (Range Slider)
  • BetterForms Specific Notes
  • Full Property Reference

Was this helpful?

  1. Reference
  2. Page Elements
  3. BetterForms Elements

Range Slider (noUiSlider)

The Range Slider element allows users to select a single value or a range of values by sliding handles along a track. It's highly customizable and suitable for selecting numeric ranges, like price, age, or percentages.

In BetterForms, this element leverages the noUiSlider library to provide a touch-friendly and flexible range selection interface.

Common Configuration Properties

Property
Type
Description

type

String

Must be set to "noUiSlider".

label

String

The label for the range slider.

model

String

The key in your BetterForms data model where the selected value or array of values (for range) will be stored.

disabled

Boolean

If true, the slider will be visible but not interactive. Defaults to false.

readonly

Boolean

If true, the slider value cannot be changed. Similar to disabled. Defaults to false.

hint

String

Additional helper text displayed below the slider.

styleClasses

String / Array

CSS classes for styling the wrapper.

noUiSliderOptions

Object

Crucial property. An object containing options for the underlying noUiSlider component. See examples.

noUiSliderOptions common settings:

Option
Type
Description

start

Number / Array

Initial value(s) of the slider. A single number for one handle, an array of two numbers for a range (e.g., [20, 80]).

range

Object

Defines the slider's min and max values. E.g., { 'min': 0, 'max': 100 }.

connect

Boolean / Array / String

Highlights the area between handles or from an edge to a handle. true for a range, [true, false] for lower connect.

step

Number

The increment/decrement step size.

orientation

String

Orientation of the slider: "horizontal" (default) or "vertical".

tooltips

Boolean / Array / Object

Whether to show tooltips above the handles. Can be true, or an array of formatter objects.

format

Object

An object with to and from functions for formatting the displayed values (e.g., adding units like '$' or '%').

behaviour

String

User interaction behavior, e.g., 'tap-drag', 'drag'.

pips

Object

Configuration for displaying pips (markers) along the slider.

Example Schema Snippet (Single Value Slider)

{
  "type": "noUiSlider",
  "label": "Set Volume",
  "model": "volumeLevel",
  "noUiSliderOptions": {
    "start": 50,
    "range": {
      "min": 0,
      "max": 100
    },
    "step": 1,
    "tooltips": true,
    "connect": [true, false] // Connects the lower part to the handle
  }
}

Example Schema Snippet (Range Slider)

{
  "type": "noUiSlider",
  "label": "Price Range",
  "model": "priceRangeArray", // Stores an array like [minPrice, maxPrice]
  "noUiSliderOptions": {
    "start": [200, 800],
    "range": {
      "min": 0,
      "max": 1000
    },
    "step": 10,
    "connect": true, // Connects the area between the two handles
    "tooltips": true, // Can also be an array: [wNumb({ decimals: 0 }), wNumb({ decimals: 0 })]
    "format": { // Example using wNumb for formatting (requires wNumb.js)
      "to": function (value) { return '$' + parseInt(value); },
      "from": function (value) { return Number(value.replace('$', '')); }
    }
  }
}

BetterForms Specific Notes

  • The model will store a single number if one handle is used, or an array of two numbers if two handles (a range) are used.

  • For advanced tooltip formatting or value formatting (like adding currency symbols or units), you'll typically use the tooltips (with formatters) or format options within noUiSliderOptions. The wNumb library is commonly used with noUiSlider for number formatting, but it needs to be available in your project.

  • Check the noUiSlider documentation for the full extent of customization available through noUiSliderOptions.

Full Property Reference

This element wraps the noUiSlider library. For a comprehensive list of all noUiSliderOptions and detailed technical specifications, please refer to:

PreviousMasked InputNextRadios

Last updated 25 days ago

Was this helpful?

VFG noUiSlider Field Documentation
noUiSlider Official Documentation