How to use the react-range.getTrackBackground function in react-range

To help you get started, we’ve selected a few react-range examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github firhan200 / refast / src / components / pages / SearchPage.js View on Github external
onMouseDown={props.onMouseDown}
                                        onTouchStart={props.onTouchStart}
                                        style={{
                                            ...props.style,
                                            height: '60px',
                                            display: 'flex',
                                            width: '100%'
                                        }}
                                        >
                                        <div max="" style="{{">
                                            {children}
                                        </div>
                                        
                                    )}
                                    renderThumb={({ index, props, isDragged }) =&gt; (
github uber / baseweb / src / slider / styled-components.js View on Github external
export const InnerTrack = styled('div', props =&gt; {
  const {$theme, $value = [], $min, $max, $disabled} = props;
  const {colors, borders, sizing, direction} = $theme;
  const borderRadius = $theme.borders.useRoundedCorners ? borders.radius100 : 0;
  return {
    borderTopLeftRadius: borderRadius,
    borderTopRightRadius: borderRadius,
    borderBottomRightRadius: borderRadius,
    borderBottomLeftRadius: borderRadius,
    background: getTrackBackground({
      values: $value,
      colors:
        $value.length === 1
          ? [colors.primary, colors.mono400]
          : [colors.mono400, colors.primary, colors.mono400],
      min: $min || 0,
      max: $max || 0,
      rtl: direction === 'rtl',
    }),
    height: sizing.scale100,
    width: '100%',
    alignSelf: 'center',
    cursor: $disabled ? 'not-allowed' : 'inherit',
  };
});
InnerTrack.displayName = 'StyledInnerTrack';
github ritz078 / raaga / components / PianoRangeSelector / PianoRangeSelector.tsx View on Github external
renderTrack={({ props, children }) =&gt; (
                  <div style="{props.style}">
                    <div style="{{">
                      {children}
                    </div>
                  </div>
                )}
                renderThumb={({ index, props }) =&gt; (
github veritone / veritone-sdk / packages / veritone-react-common / src / components / RangeSelect / index.js View on Github external
renderTrack = ({ props, children }) =&gt; (
    <div>
      <div max="" style="{{">
        {children}
      </div>
    </div>
  )

react-range

Range input. Slides in all directions.

MIT
Latest version published 5 months ago

Package Health Score

75 / 100
Full package analysis