feat: added option menu
This commit is contained in:
@@ -16,7 +16,7 @@ class Slider extends Widget{
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 120, height: 40 },
|
||||
size: { width: 'fit', height: 'fit' },
|
||||
attrs: {
|
||||
...newAttrs,
|
||||
styling: {
|
||||
@@ -54,6 +54,13 @@ class Slider extends Widget{
|
||||
toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
|
||||
value: 1,
|
||||
onChange: (value) => this.setAttrValue("scale.step", value)
|
||||
},
|
||||
default: {
|
||||
label: "Default",
|
||||
tool: Tools.NUMBER_INPUT,
|
||||
toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
|
||||
value: 0,
|
||||
onChange: (value) => this.setAttrValue("scale.default", value)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -85,9 +92,17 @@ class Slider extends Widget{
|
||||
renderContent(){
|
||||
return (
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
|
||||
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
|
||||
<div className="tw-text-sm tw-text-gray-300">
|
||||
{this.getAttrValue("placeHolder")}
|
||||
<div className="flex flex-col items-center justify-center h-screen bg-gray-100">
|
||||
<div className="w-full max-w-md">
|
||||
<input
|
||||
type="range"
|
||||
min={this.getAttrValue("scale.min")}
|
||||
max={this.getAttrValue("scale.max")}
|
||||
step={this.getAttrValue("scale.step")}
|
||||
value={this.getAttrValue("scale.default")}
|
||||
className="tw-pointer-events-none w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user