1

For my open-source plugin SimpleTOC I want to add the option to let the user select the range for the TOC:

H2 to H6 or H1 to H3 and so on. I remembered this jQuery UI element "Rangeslider": https://jqueryui.com/slider/#range but in Gutenberg I only found: https://developer.wordpress.org/block-editor/reference-guides/components/range-control/ with one value the user can select. How can I extend this component? Are there any more elements I can import? Or is there an easy way to do this? Because my current solution would be to use two dropdowns with a min and max value which is not user-friendly.

For everyone who likes images: I need this in Gutenberg: enter image description here

Thanks for your help!

My test code until now:

<PanelBody>
 <PanelRow>
          <PanelRow>
            <RangeControl
              label={__("TEST: Maximum Level", 'simpletoc')}
              value={ props.attributes.max_level }
              onChange={ ( level ) => props.setAttributes( { max_level: Number(level) } ) }
              min={ 1 }
              max={ 6 }
          />
          </PanelRow>
          <PanelRow>
            <SelectControl
                label={__("Maximum Level", 'simpletoc')}
                help={__('Maximum depth of the headings.', 'simpletoc')}
                value= { props.attributes.max_level }
                options={ [
                    { label: __('Including', 'simpletoc') + ' H6 (' + __('Show all', 'simpletoc') + ')' , value: '6' },
                    { label: __('Including', 'simpletoc') + ' H5', value: '5' },
                    { label: __('Including', 'simpletoc') + ' H4', value: '4' },
                    { label: __('Including', 'simpletoc') + ' H3', value: '3' },
                    { label: __('Including', 'simpletoc') + ' H2', value: '2' },
                ] }
                onChange={ ( level ) => props.setAttributes( { max_level: Number(level) } ) }
            />
            </PanelRow>
            <PanelRow>
            <SelectControl
                label={__("Minimum Level", 'simpletoc')}
                help={__('Minimum depth of the headings.', 'simpletoc')}
                value= { props.attributes.min_level }
                options={ [
                    { label: __('Including', 'simpletoc') + ' H6' , value: '6' },
                    { label: __('Including', 'simpletoc') + ' H5', value: '5' },
                    { label: __('Including', 'simpletoc') + ' H4', value: '4' },
                    { label: __('Including', 'simpletoc') + ' H3', value: '3' },
                    { label: __('Including', 'simpletoc') + ' H2 (' + __('Default', 'simpletoc') + ')', value: '2' },
                    { label: __('Including', 'simpletoc') + ' H1', value: '1' },
                ] }
                onChange={ ( level ) => props.setAttributes( { min_level: Number(level) } ) }
            />
          </PanelRow>
        </PanelBody>

Code is in a new branch on github: https://github.com/mtoensing/simpletoc/tree/rangeslider

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.