@coreui/vue/dist/cjs/components/form/CFormRange.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var CFormLabel = require('./CFormLabel.js');

const CFormRange = vue.defineComponent({
    name: 'CFormRange',
    props: {
        /**
         * Toggle the disabled state for the component.
         */
        disabled: Boolean,
        /**
         * Add a caption for a component.
         *
         * @since 4.3.0
         */
        label: String,
        /**
         * Specifies the maximum value for the component.
         */
        max: Number,
        /**
         * Specifies the minimum value for the component.
         */
        min: Number,
        /**
         * The default name for a value passed using v-model.
         */
        modelValue: String,
        /**
         * Toggle the readonly state for the component.
         */
        readonly: Boolean,
        /**
         * Specifies the interval between legal numbers in the component.
         */
        steps: Number,
        /**
         * The `value` attribute of component.
         *
         * @controllable onChange
         * */
        value: Number,
    },
    emits: [
        /**
         * Event occurs when the value has been changed.
         */
        'change',
        /**
         * Emit the new value whenever there’s a change event.
         */
        'update:modelValue',
    ],
    setup(props, { attrs, emit, slots }) {
        const handleChange = (event) => {
            const target = event.target;
            emit('change', event);
            emit('update:modelValue', target.value);
        };
        return () => [
            props.label &&
                vue.h(CFormLabel.CFormLabel, {
                    for: attrs.id,
                }, {
                    default: () => (slots.label && slots.label()) || props.label,
                }),
            vue.h('input', {
                ...attrs,
                class: 'form-range',
                disabled: props.disabled,
                max: props.max,
                min: props.min,
                onChange: (event) => handleChange(event),
                readonly: props.readonly,
                steps: props.steps,
                type: 'range',
                value: props.modelValue,
            }, slots.default && slots.default()),
        ];
    },
});

exports.CFormRange = CFormRange;
//# sourceMappingURL=CFormRange.js.map