vrc
vue-range-component-fix
npm i vue-range-component-fix
vrc

vue-range-component-fix

A range slider component based on vue (Vue滑块组件).

by Lemon

1.0.0 (see all)License:MITTypeScript:Not Found
npm i vue-range-component-fix
Readme

vue-range-slider

A range slider component based on vue (Vue滑块组件).

downloads npm-version license

Can use the slider in vue2.x.

Live demos

Demo01

Demo02

Demo03

Demo04

Demo05

Todo

  • Basis
  • Display maximum value & minimum value
  • piecewise style
  • Compatible with PC and mobile terminal
  • Tooltip
  • The custom data
  • Range
  • The vertical component

Install

npm install vue-range-component --save

Usage

Use in vue project

<template>
  <div>
    <vue-range-slider ref="slider" v-model="value"></vue-range-slider>
  </div>
</template>
<script>
import 'vue-range-component/dist/vue-range-slider.css'
import VueRangeSlider from 'vue-range-component'

export default {
  data() {
    return {
      value: 1
    }
  },
  components: {
    VueRangeSlider
  }
}
</script>

Exceptions

if the component initialization in a v-show="false" / display: none container or use transform / animation / margin to change the location of the component, there may be an exception ( The slider cannot be used, because the component can not initialize the size or slider position ).

The solution:

  1. using v-if instead of v-show or display: none.
  2. use prop show to control display.
  3. After the component appears, to call the refresh method.

Options

Props

PropsTypeDefaultDescription
directionStringhorizontalSet the direction of the component, optional value: ['horizontal', 'vertical']
event-typeStringautoThe event type, optional value: ['auto', 'none']
widthNumber[,String(in horizontal)]autoWidth of the component
heightNumber[,String(in vertical)]6Height of the component
dot-sizeNumber16Determines width and height of the sliders. to set different values of width & height use dot-width & dot-height props
dot-widthNumbervalue of dot-size propWidth of sliders. If specified, overrides value of dot-size
dot-heightNumbervalue of dot-size propHeight of sliders. If specified, overrides value of dot-size
minNumber0The minimum numerical value that can be selected
maxNumber100The maximum numerical value that can be selected
stepNumber1The gap between the values
showBooleantrueDisplay of the component
speedNumber0.5Transition time
disabledBoolean[, Array(in range model)]falseWhether to disable the component
debugBooleantrueIf you do not need to print errors in the production environment, can be set to process.env.NODE_ENV !== 'production'
piecewiseBooleanfalseWhether to display sub-values as as piecewise nodes
piecewise-label*BooleanfalseWhether to display the label.
tooltipString, BooleanalwaysControl the tooltip, optional value: ['hover', 'always', false]
tooltip-dirString[,Array(in range model)top(in horizontal)or left(in vertical)Set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right']
reverseBooleanfalseWhether the component reverse (such as Right to left, Top to bottom)
valueNumber, String, Array, Object0Initial value (if the value for the array open range model)
dataArraynullThe custom data.
clickableBooleantrueWhether or not the slider is clickable as well as drag-able
enable-cross*BooleantrueWhether to allow crossover in range mode
start-animation*BooleanfalseWhether to enable the initial animation
tooltip-merge*BooleantrueWhether to merge with tooltip overlap
merge-formatter*String, FunctionnullFormatting of the merged value, for example: merge-formatter="¥{value1} ~ ¥{value2}" or merge-formatter: (v1, v2) => `¥${v1} ~ ¥${v2}`.
stop-propagation*BooleanfalseAll events call stopPropagation
real-time*BooleanfalseWhether the real-time computing the layout of the components
lazy*BooleanfalseAt the end of the drag and drop, to synchronization value (if each update to high consumption of operation (such as Ajax), it is more useful)
fixed*BooleanfalseFixed distance between two values (valid only in range mode). [Example]
min-range*NumbernullMinimum range in range mode
max-range*NumbernullMaximum range in range mode
process-draggable*BooleanfalseWhether the process bar is draggable (valid only in range mode).
formatter*      String,Functionnull  Formatting of a tooltip's values, for example: formatter='¥{value}' or formatter: (v) => `¥${v}`.
use-keyboard*BooleanfalseWhether to open the keyboard control (only supports the arrow keys).
actions-keyboard*Array[(i) => i - 1, (i) => i + 1]In the keyboard control mode, reduce(←, ↓) and increase(→, ↑) the calling method.(i is the index value)
bg-style*ObjectnullThe style of the background.
slider-style*Object[, Array(in range model), Function<Value, Index>]nullThe style of the slider.
disabled-style*ObjectnullThe style of the slider in disabled state.
disabled-dot-style*Object, Array, Function<Value, Index>]nullThe style of the dot in disabled state.
process-style*ObjectnullThe style of the process bar.
piecewise-style*ObjectnullThe style of the piecewise dot.
piecewise-active-style*ObjectnullThe style of the piecewise dot in the activated state.
tooltip-style*Object[, Array(in range model), Function<Value, Index>]nullThe style of the tooltip.
label-style*ObjectnullThe style of the label.
label-active-style*ObjectnullThe style of the label in the activated state.
focus-style*Object[, Array(in range model), Function<Value, Index>]nullThe style of the slider when it is focused. (Works only when use-keyboard is true)

Function

NameTypeDescription
setValueParams: value [, noCallback: boolean, speed: number]set value of the component
setIndexParams: index*set index of the component
getValueReturn: valueget value of the component
getIndexReturn: index*get index of the component
refreshnullRefresh the component
  • [ index ] is the index to the array in the custom data model *
  • [ index ] is equal to (( value - min ) / interval ) in normal mode *

Events

NameTypeDescription
slide-endParams: value[Number | Array]values change when the callback function. (Changes in the direct assignment value will not trigger the callback, it is recommended to use setValue method)
drag-start  Params: context[Object]Drag the start event
drag-endParams: context[Object]Drag the end event
on-keypressParams: value[Number | Array]keyboard event

Slot

NameDescription
dotCustomize the dot slot. optional value: [value, disabled, index(only range model)]
tooltipCustomize the tooltip slot. optional value: [value, index, disabled(only range model), merge(only tooltipMerge is true)]
piecewiseCustomize the piecewise slot. optional value: [label, index, active, first, last]
labelCustomize the label slot. optional value: [label, index, active, first, last]

# When using the template element as a slot, can add special properties scope or slot-scope to get the value.

e.g.

<vue-range-slider v-model="value">
  <template slot="tooltip" scope="{value}">
    <div class="diy-tooltip">
      {{ value }}
    </div>
  </template>
</vue-range-slider>

<!-- In vue2.5 above, please use slot-scope instead of scope -->
<vue-range-slider v-model="value">
  <div class="diy-tooltip" slot="tooltip" slot-scope="{ value }">
    {{ value }}
  </div>
</vue-range-slider>

Using it with NUXT.js

This hack is just to avoid the server side 'document' error when using it with Nuxt.js. Use it if you don't need to have this component rendered on the server side.

  1. Install this and add it to the variable components. i.e.
import NoSSR from 'vue-no-ssr'

let components = {
    /**
     * Add No Server Side Render component
     * to make client DOM math the server DOM
     */
    'no-ssr': NoSSR
}
  1. In your template, encapsulate 'vue-range-slider' into the 'no-ssr' component to avoid render the html on the server like this:
<no-ssr>
    <vue-range-slider ref="slider"></vue-range-slider>
</no-ssr>
  1. Require the library just for client side and add the 'vue-range-slider' component to the template component list
if (process.browser) {
    // in older versions of nuxt, it's process.BROWSER_BUILD
    let VueRangeSlider = require('vue-range-component')
    components['vue-range-slider'] = VueRangeSlider
}
  1. Apply the components
export default {
    components
}

License

MIT

Downloads/wk

51

GitHub Stars

117

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

29

OPEN PRs

1
VersionTagPublished
1.0.0
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate