# LivaRangeSelector
Package: @dataliva/livalib
Description: @dataliva/livalib aralık seçici (range selector) bileşeni.

DevExtreme'in RangeSelector bileşenini saran ince bir katman. Bir ölçek
üzerinde iki kaydırıcıyla alt/üst sınır seçtirir; fiyat filtresi, dönem
seçimi gibi senaryolarda kullanılır. Ölçek ve kaydırıcı alt bileşenleri
`devextreme-react/range-selector` paketinden içe aktarılır.

```tsx
import { LivaRangeSelector } from "@dataliva/livalib";
import { Scale, SliderMarker } from "devextreme-react/range-selector";
```

## Aralık seçimi ve onValueChanged

`Scale` başlangıç/bitiş değerlerini ve işaret aralıklarını tanımlar.
Kullanıcı kaydırıcıyı bıraktığında `onValueChanged` tetiklenir; `e.value`
seçilen alt ve üst sınırı içeren bir dizidir. Başlangıç seçimi
`defaultValue` ile verilir.

**Örnek — Sayısal aralık seçimi:**

```tsx
const [aralik, setAralik] = useState<[number, number]>([20, 60]);

<LivaRangeSelector
  height={140}
  defaultValue={[20, 60]}
  onValueChanged={(e) => setAralik(e.value as [number, number])}
>
  <Scale startValue={0} endValue={100} tickInterval={10} minorTickInterval={5} />
</LivaRangeSelector>
<p>Seçilen aralık: {aralik[0]} – {aralik[1]} bin ₺</p>
```

## Kaydırıcı etiketleri

`SliderMarker` kaydırıcıların üzerindeki değer etiketlerini yapılandırır;
`format` ile sayı biçimi belirlenir.

**Örnek — Biçimlendirilmiş kaydırıcı etiketleri:**

```tsx
<LivaRangeSelector height={140} defaultValue={[150, 400]}>
  <Scale startValue={0} endValue={500} tickInterval={100} minorTickInterval={25} />
  <SliderMarker format="#,##0 ₺" />
</LivaRangeSelector>
```

## Prop'lar

| Prop | Tip | Açıklama |
|------|------|---------|
| `defaultValue` | `[number, number]` | Başlangıçta seçili aralık |
| `value` | `[number, number]` | Kontrollü kullanımda seçili aralık |
| `onValueChanged` | `(e) => void` | Seçim değişince tetiklenir, `e.value` yeni aralık |
| `dataSource` | `object[]` | Ölçeği veriden üretmek için isteğe bağlı kaynak |
| `height` / `width` | `number \| string` | Bileşen boyutları |
| `className` | `string` | livalib'e özgü ek prop |
| `style` | `React.CSSProperties` | livalib'e özgü ek prop |

`Scale`, `SliderMarker`, `Behavior`, `Chart` gibi alt bileşenler
`devextreme-react/range-selector` paketinden alınır. Geri kalan tüm prop'lar
DevExtreme `RangeSelector`'dan miras alınır.