Nouislider Slider funktioniert nicht in reagieren

Question

Ich benutze den folgenden Code, um die Noualslider-Reaktion zu initialisieren. Aber es ist CSS wird nicht geladen. Was soll ich machen? Ich habe den react-nouislider importiert. Funktionalitäten funktionieren gut. Aber ich die Regler wie als Text sehe unter

<SliderInput 
    range={{min: 0, max: 200}} 
    start={[0, 100]} 
    tooltips 
    /> 

Vielen Dank im Voraus

Answer 1

u haben etwas Art addieren auf diesem Schieber

versuchen, dieses Beispiel style.css Code unten (von https://codepen.io/mshwery/pen/CBslE)

body { 
    text-align: center; 
    padding: 20px; 
} 

.no-ui-slider { 
    width: 100%; 
    max-width: 500px; 
    margin: 50px auto; 
} 

/* 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-user-select: none; 
-ms-touch-action: none; 
-ms-user-select: none; 
-moz-user-select: none; 
-moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.noUi-base { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.noUi-origin { 
    position: absolute; 
    right: 0; 
    top: 0; 
    left: 0; 
    bottom: 0; 
} 
.noUi-handle { 
    position: relative; 
    z-index: 1; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.noUi-stacking .noUi-handle { 
/* This class is applied to the lower origin when 
    its values is > 50%. */ 
    z-index: 10; 
} 
.noUi-stacking + .noUi-origin { 
/* Fix stacking order in IE7, which incorrectly 
    creates a new context for the origins. */ 
    *z-index: -1; 
} 
.noUi-state-tap .noUi-origin { 
-webkit-transition: left 0.3s, top 0.3s; 
    transition: left 0.3s, top 0.3s; 
} 
.noUi-state-drag * { 
    cursor: inherit !important; 
} 

/* Slider size and handle placement; 
*/ 
.noUi-horizontal { 
    height: 10px; 
} 
.noUi-horizontal .noUi-handle { 
    width: 20px; 
    height: 20px; 
    left: -10px; 
    top: -7px; 
} 
.noUi-horizontal.noUi-extended { 
    padding: 0 15px; 
} 
.noUi-horizontal.noUi-extended .noUi-origin { 
    right: -15px; 
} 

/* Styling; 
*/ 
.noUi-background { 
    background: #3182bd; 
} 
.noUi-connect { 
    background: #3FB8AF; 
    box-shadow: inset 0 0 3px rgba(51,51,51,0.45); 
-webkit-transition: background 450ms; 
    transition: background 450ms; 
} 
.noUi-origin { 
    border-radius: 2px; 
    background: #eee; 
} 
.noUi-target { 
    border-radius: 2px; 
} 
.noUi-target.noUi-connect { 
    box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB; 
} 

/* Handles and cursors; 
*/ 
.noUi-dragable { 
    cursor: w-resize; 
} 
.noUi-vertical .noUi-dragable { 
    cursor: n-resize; 
} 
.noUi-handle { 
    border-radius: 2px 2px 0 0; 
    background: #fff; 
    cursor: default; 
    box-shadow: 0 0px 1px rgba(0,0,0,0.5); 
    } 
.noUi-active { 

} 

/* Handle stripes; 
*/ 
.noUi-handle:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0px; 
    top: 100%; 
    border-top: 11px solid #fff; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
} 

.noUi-handle:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: -0px; 
    top: 100%; 
    margin-top: 1px; 
    border-top: 11px solid rgba(0,0,0,0.2); 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
} 

/* Disabled state; 
*/ 
[disabled].noUi-connect, 
[disabled] .noUi-connect { 
    background: #B8B8B8; 
} 
[disabled] .noUi-handle { 
    cursor: not-allowed; 
}