可以切换样式
This commit is contained in:
@@ -0,0 +1,304 @@
|
||||
/* Functional styling;
|
||||
* These styles are required for noUiSlider to function.
|
||||
* You don't need to change these rules to apply your design.
|
||||
*/
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
}
|
||||
.noUi-base,
|
||||
.noUi-connects {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
/* Wrapper for all connect elements.
|
||||
*/
|
||||
.noUi-connects {
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-ms-transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-origin: 0 0;
|
||||
transform-style: flat;
|
||||
}
|
||||
/* Offset direction
|
||||
*/
|
||||
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
/* Give origins 0 height/width so they don't interfere with clicking the
|
||||
* connect elements.
|
||||
*/
|
||||
.noUi-vertical .noUi-origin {
|
||||
top: -100%;
|
||||
width: 0;
|
||||
}
|
||||
.noUi-horizontal .noUi-origin {
|
||||
height: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.noUi-touch-area {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.noUi-state-tap .noUi-connect,
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
/* Slider size and handle placement;
|
||||
*/
|
||||
.noUi-horizontal {
|
||||
height: 18px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
right: -17px;
|
||||
top: -6px;
|
||||
}
|
||||
.noUi-vertical {
|
||||
width: 18px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
right: -6px;
|
||||
bottom: -17px;
|
||||
}
|
||||
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
|
||||
left: -17px;
|
||||
right: auto;
|
||||
}
|
||||
/* Styling;
|
||||
* Giving the connect element a border radius causes issues with using transform: scale
|
||||
*/
|
||||
.noUi-target {
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D3D3D3;
|
||||
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
|
||||
}
|
||||
.noUi-connects {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: #3FB8AF;
|
||||
}
|
||||
/* Handles and cursors;
|
||||
*/
|
||||
.noUi-draggable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.noUi-vertical .noUi-draggable {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.noUi-handle {
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #FFF;
|
||||
cursor: default;
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
|
||||
}
|
||||
.noUi-active {
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
|
||||
}
|
||||
/* Handle stripes;
|
||||
*/
|
||||
.noUi-handle:before,
|
||||
.noUi-handle:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background: #E8E7E6;
|
||||
left: 14px;
|
||||
top: 6px;
|
||||
}
|
||||
.noUi-handle:after {
|
||||
left: 17px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:before,
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
top: 17px;
|
||||
}
|
||||
/* Disabled state;
|
||||
*/
|
||||
[disabled] .noUi-connect {
|
||||
background: #B8B8B8;
|
||||
}
|
||||
[disabled].noUi-target,
|
||||
[disabled].noUi-handle,
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* Base;
|
||||
*
|
||||
*/
|
||||
.noUi-pips,
|
||||
.noUi-pips * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
}
|
||||
/* Values;
|
||||
*
|
||||
*/
|
||||
.noUi-value {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* Markings;
|
||||
*
|
||||
*/
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background: #CCC;
|
||||
}
|
||||
.noUi-marker-sub {
|
||||
background: #AAA;
|
||||
}
|
||||
.noUi-marker-large {
|
||||
background: #AAA;
|
||||
}
|
||||
/* Horizontal layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-horizontal {
|
||||
padding: 10px 0;
|
||||
height: 80px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.noUi-value-horizontal {
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
.noUi-rtl .noUi-value-horizontal {
|
||||
-webkit-transform: translate(50%, 50%);
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-sub {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 15px;
|
||||
}
|
||||
/* Vertical layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-vertical {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.noUi-value-vertical {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding-left: 25px;
|
||||
}
|
||||
.noUi-rtl .noUi-value-vertical {
|
||||
-webkit-transform: translate(0, 50%);
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-sub {
|
||||
width: 10px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-large {
|
||||
width: 15px;
|
||||
}
|
||||
.noUi-tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noUi-horizontal .noUi-tooltip {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
bottom: 120%;
|
||||
}
|
||||
.noUi-vertical .noUi-tooltip {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 120%;
|
||||
}
|
||||
.noUi-horizontal .noUi-origin > .noUi-tooltip {
|
||||
-webkit-transform: translate(50%, 0);
|
||||
transform: translate(50%, 0);
|
||||
left: auto;
|
||||
bottom: 10px;
|
||||
}
|
||||
.noUi-vertical .noUi-origin > .noUi-tooltip {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
top: auto;
|
||||
right: 28px;
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
interface CssClasses {
|
||||
target: string;
|
||||
base: string;
|
||||
origin: string;
|
||||
handle: string;
|
||||
handleLower: string;
|
||||
handleUpper: string;
|
||||
touchArea: string;
|
||||
horizontal: string;
|
||||
vertical: string;
|
||||
background: string;
|
||||
connect: string;
|
||||
connects: string;
|
||||
ltr: string;
|
||||
rtl: string;
|
||||
textDirectionLtr: string;
|
||||
textDirectionRtl: string;
|
||||
draggable: string;
|
||||
drag: string;
|
||||
tap: string;
|
||||
active: string;
|
||||
tooltip: string;
|
||||
pips: string;
|
||||
pipsHorizontal: string;
|
||||
pipsVertical: string;
|
||||
marker: string;
|
||||
markerHorizontal: string;
|
||||
markerVertical: string;
|
||||
markerNormal: string;
|
||||
markerLarge: string;
|
||||
markerSub: string;
|
||||
value: string;
|
||||
valueHorizontal: string;
|
||||
valueVertical: string;
|
||||
valueNormal: string;
|
||||
valueLarge: string;
|
||||
valueSub: string;
|
||||
}
|
||||
export interface PartialFormatter {
|
||||
to: (value: number) => string | number;
|
||||
from?: (value: string) => number | false;
|
||||
}
|
||||
export interface Formatter extends PartialFormatter {
|
||||
from: (value: string) => number | false;
|
||||
}
|
||||
export declare enum PipsMode {
|
||||
Range = "range",
|
||||
Steps = "steps",
|
||||
Positions = "positions",
|
||||
Count = "count",
|
||||
Values = "values"
|
||||
}
|
||||
export declare enum PipsType {
|
||||
None = -1,
|
||||
NoValue = 0,
|
||||
LargeValue = 1,
|
||||
SmallValue = 2
|
||||
}
|
||||
declare type WrappedSubRange = [number] | [number, number];
|
||||
declare type SubRange = number | WrappedSubRange;
|
||||
interface Range {
|
||||
min: SubRange;
|
||||
max: SubRange;
|
||||
[key: `${number}%`]: SubRange;
|
||||
}
|
||||
interface BasePips {
|
||||
mode: PipsMode;
|
||||
density?: number;
|
||||
filter?: PipsFilter;
|
||||
format?: PartialFormatter;
|
||||
}
|
||||
interface PositionsPips extends BasePips {
|
||||
mode: PipsMode.Positions;
|
||||
values: number[];
|
||||
stepped?: boolean;
|
||||
}
|
||||
interface ValuesPips extends BasePips {
|
||||
mode: PipsMode.Values;
|
||||
values: number[];
|
||||
stepped?: boolean;
|
||||
}
|
||||
interface CountPips extends BasePips {
|
||||
mode: PipsMode.Count;
|
||||
values: number;
|
||||
stepped?: boolean;
|
||||
}
|
||||
interface StepsPips extends BasePips {
|
||||
mode: PipsMode.Steps;
|
||||
}
|
||||
interface RangePips extends BasePips {
|
||||
mode: PipsMode.Range;
|
||||
}
|
||||
declare type Pips = PositionsPips | ValuesPips | CountPips | StepsPips | RangePips;
|
||||
declare type StartValues = string | number | (string | number)[];
|
||||
declare type HandleAttributes = {
|
||||
[key: string]: string;
|
||||
};
|
||||
interface UpdatableOptions {
|
||||
range?: Range;
|
||||
start?: StartValues;
|
||||
margin?: number;
|
||||
limit?: number;
|
||||
padding?: number | number[];
|
||||
snap?: boolean;
|
||||
step?: number;
|
||||
pips?: Pips;
|
||||
format?: Formatter;
|
||||
tooltips?: boolean | PartialFormatter | (boolean | PartialFormatter)[];
|
||||
animate?: boolean;
|
||||
}
|
||||
export interface Options extends UpdatableOptions {
|
||||
range: Range;
|
||||
connect?: "lower" | "upper" | boolean | boolean[];
|
||||
orientation?: "vertical" | "horizontal";
|
||||
direction?: "ltr" | "rtl";
|
||||
behaviour?: string;
|
||||
keyboardSupport?: boolean;
|
||||
keyboardPageMultiplier?: number;
|
||||
keyboardMultiplier?: number;
|
||||
keyboardDefaultStep?: number;
|
||||
documentElement?: HTMLElement;
|
||||
cssPrefix?: string;
|
||||
cssClasses?: CssClasses;
|
||||
ariaFormat?: PartialFormatter;
|
||||
animationDuration?: number;
|
||||
handleAttributes?: HandleAttributes[];
|
||||
}
|
||||
export interface API {
|
||||
destroy: () => void;
|
||||
steps: () => NextStepsForHandle[];
|
||||
on: (eventName: string, callback: EventCallback) => void;
|
||||
off: (eventName: string) => void;
|
||||
get: (unencoded?: boolean) => GetResult;
|
||||
set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
|
||||
setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
|
||||
reset: (fireSetEvent?: boolean) => void;
|
||||
disable: (handleNumber?: number) => void;
|
||||
enable: (handleNumber?: number) => void;
|
||||
options: Options;
|
||||
updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
|
||||
target: HTMLElement;
|
||||
removePips: () => void;
|
||||
removeTooltips: () => void;
|
||||
getTooltips: () => {
|
||||
[handleNumber: number]: HTMLElement | false;
|
||||
};
|
||||
getOrigins: () => {
|
||||
[handleNumber: number]: HTMLElement;
|
||||
};
|
||||
pips: (grid: Pips) => HTMLElement;
|
||||
}
|
||||
interface TargetElement extends HTMLElement {
|
||||
noUiSlider?: API;
|
||||
}
|
||||
interface NearByStep {
|
||||
startValue: number;
|
||||
step: number | false;
|
||||
highestStep: number;
|
||||
}
|
||||
interface NearBySteps {
|
||||
stepBefore: NearByStep;
|
||||
thisStep: NearByStep;
|
||||
stepAfter: NearByStep;
|
||||
}
|
||||
declare type GetResult = number | string | (string | number)[];
|
||||
declare type NextStepsForHandle = [number | false | null, number | false | null];
|
||||
declare type PipsFilter = (value: number, type: PipsType) => PipsType;
|
||||
declare type EventCallback = (this: API, values: (number | string)[], handleNumber: number, unencoded: number[], tap: boolean, locations: number[], slider: API) => void;
|
||||
declare class Spectrum {
|
||||
xPct: number[];
|
||||
xVal: number[];
|
||||
xSteps: (number | false)[];
|
||||
xNumSteps: (number | false)[];
|
||||
protected xHighestCompleteStep: number[];
|
||||
protected snap: boolean;
|
||||
constructor(entry: Range, snap: boolean, singleStep: number);
|
||||
getDistance(value: number): number[];
|
||||
getAbsoluteDistance(value: number, distances: number[] | null, direction: boolean): number;
|
||||
toStepping(value: number): number;
|
||||
fromStepping(value: number): number;
|
||||
getStep(value: number): number;
|
||||
getDefaultStep(value: number, isDown: boolean, size: number): number;
|
||||
getNearbySteps(value: number): NearBySteps;
|
||||
countStepDecimals(): number;
|
||||
hasNoSize(): boolean;
|
||||
convert(value: number): number;
|
||||
private handleEntryPoint;
|
||||
private handleStepPoint;
|
||||
}
|
||||
declare const cssClasses: CssClasses;
|
||||
declare function initialize(target: TargetElement, originalOptions: Options): API;
|
||||
export { TargetElement as target };
|
||||
export { initialize as create };
|
||||
export { cssClasses };
|
||||
declare const _default: {
|
||||
__spectrum: typeof Spectrum;
|
||||
cssClasses: CssClasses;
|
||||
create: typeof initialize;
|
||||
};
|
||||
export default _default;
|
||||
+2282
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2271
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user