[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseSlider](./x-components.baseslider.md) ## BaseSlider variable This component implements a range slider and prints the selected values. It receives a threshold prop to set the limits and uses v-model to get and set the selected values. It makes use of the nouslider library **Signature:** ```typescript _default: import("vue").DefineComponent; default: () => { min: number; max: number; }; }; modelValue: { type: PropType<{ min: number; max: number; }>; required: true; }; contentClass: { type: StringConstructor; default: string; }; }>, { slider: import("vue").Ref; rangeSelected: import("vue").ComputedRef; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; default: () => { min: number; max: number; }; }; modelValue: { type: PropType<{ min: number; max: number; }>; required: true; }; contentClass: { type: StringConstructor; default: string; }; }>> & Readonly<{ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }>, { threshold: { min: number; max: number; }; contentClass: string; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```