Skip to content

Dev WordPress

Just another WordPress site

Menu
  • Suppport
  • List Add-ons Contact Form 7
  • Supports

Contact Form 7 Range Slider


    [demo 'range range-186 min:100 max:1000 from:500']

    [demo 'range range-285 type:double min:0 max:1000 from:250 to:750 grid:true']

    [demo 'range range-773 from:2 grid:true custom_values:1,100,100,1000,1000']


    [demo 'range-111 from:10 grid:true custom_values:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec']


    [demo 'range-222 from:21 grid:true min:0 max:100 max_postfix:+ prefix:Age: postfix:Years']


    [demo 'range-333 skin:square from:50 step:5 grid:true min:0 max:100 max_postfix:+ prefix:$']

    Settings

    Option Data-Attr Defaults Type Description
    skin data-skin flat string Choose UI skin to use (flat, big, modern, round, sharp, square)
    type data-type single string Choose slider type, could be single – for one handle, or double for two handles
    min data-min 10 number Set slider minimum value
    max data-max 100 number Set slider maximum value
    from data-from min number Set start position for left handle (or for single handle)
    to data-to max number Set start position for right handle
    step data-step 1 number Set sliders step. Always > 0. Could be fractional
    min_interval data-min-interval - number Set minimum diapason between sliders. Only for double type
    max_interval data-max-interval - number Set minimum maximum between sliders. Only for double type
    drag_interval data-drag-interval false boolean Allow user to drag whole range. Only for double type
    values data-values [] array Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed
    from_fixed data-from-fixed false boolean Fix position of left (or single) handle
    from_min data-from-min min number Set minimum limit for left (or single) handle
    from_max data-from-max max number Set maximum limit for left (or single) handle
    from_shadow data-from-shadow false boolean Highlight the limits for left handle
    to_fixed data-to-fixed false boolean Fix position of right handle
    to_min data-to-min min number Set minimum limit for right handle
    to_max data-to-max max number Set maximum limit for right handle
    to_shadow data-to-shadow false boolean Highlight the right handle
    prettify_enabled data-prettify-enabled true boolean Improve readability of long numbers: 10000000 → 10 000 000
    prettify_separator data-prettify-separator string Set up your own separator for long numbers: 10000000 → 10,000,000 etc.
    prettify - null function Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates
    force_edges data-force-edges false boolean Sliders handles and tooltips will be always inside it’s container
    keyboard data-keyboard true boolean Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
    grid data-grid true boolean Enables grid of values above the slider
    grid_margin data-grid-margin true boolean Set left and right grid gaps
    grid_num data-grid-num 4 number Number of grid units
    grid_snap data-grid-snap false boolean Snap grid to sliders step (step param). If activated, grid_num will not be used. Max steps = 50
    hide_min_max data-hide-min-max false boolean Hides min and max labels
    hide_from_to data-hide-from-to false boolean Hides from and to labels
    prefix data-prefix “ string Set prefix for values. Will be set up right before the number: **$**100
    postfix data-postfix “ string Set postfix for values. Will be set up right after the number: 100k
    max_postfix data-max-postfix “ string Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
    decorate_both data-decorate-both true boolean Used for double type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
    values_separator data-decorate-both - string Set your own separator for close values. Used for double type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
    input_values_separator data-input-values-separator ; string Separator for double values in input value property. <input value="25;42">
    disable data-disable false boolean Locks slider and makes it inactive. Input is disabled too. Invisible to forms
    • Checkout Builder Demo
    • Color or Image Option Swatches
    • Contact Form 7 ActiveCampaign CRM Integration
    • Contact Form 7 Autocomplete
    • Contact Form 7 Builder And Designer
    • Contact Form 7 Conditional Logic
    • Contact Form 7 Cost Calculator - Price Calculation
    • Contact Form 7 Drag and Drop FIles - Multiple Files
    • Contact form 7 Failed
    • Contact Form 7 Google Sheets Document
    • Contact Form 7 HubSpot CRM Integration
    • Contact Form 7 International Telephone Input
    • Contact Form 7 Invitation Codes
    • Contact Form 7 Multi-Step Pro
    • Contact Form 7 PayPal Pro
    • Contact Form 7 Pipedrive CRM Integration
    • Contact Form 7 Polls
    • Contact Form 7 Popup
    • Contact Form 7 Range Slider
    • Contact Form 7 Recorder Field
    • Contact Form 7 Repeater
    • Contact Form 7 Sendinblue
    • Contact Form 7 Signature
    • Contact Form 7 Star Rating Field
    • Contact Form 7 Success
    • Contact Form 7 Thank you
    • Contact Form 7 Tooltips
    • Contact Form Connect with Google Sheets
    • Google Token
    • LIVESTREAM SOCIAL
    • Restrict Dates In Contact Form 7
    • Thank You Builder
    • WordPress Instagram Feed

    Dev WordPress 2023 . Powered by WordPress

    Loading...
    Close
    Contact Form